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

package/package.json

@@ -1,91 +1,91 @@
 {
-    "name": "@a-vision-software/vue-input-components",
-    "version": "1.4.19",
-    "description": "A collection of reusable Vue 3 input components with TypeScript support",
-    "author": "A-Vision Software",
-    "license": "MIT",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/a-vision/vue-input-components.git"
+  "name": "@a-vision-software/vue-input-components",
+  "version": "1.4.21",
+  "description": "A collection of reusable Vue 3 input components with TypeScript support",
+  "author": "A-Vision Software",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/a-vision/vue-input-components.git"
+  },
+  "homepage": "https://a-vision.github.io/vue-input-components/",
+  "keywords": [
+    "vue",
+    "vue3",
+    "components",
+    "input",
+    "form",
+    "typescript",
+    "file-upload",
+    "text-input",
+    "date-picker",
+    "dropdown",
+    "textarea"
+  ],
+  "type": "module",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "main": "./dist/vue-input-components.cjs.js",
+  "module": "./dist/vue-input-components.es.js",
+  "types": "./dist/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/vue-input-components.es.js",
+      "require": "./dist/vue-input-components.cjs.js"
     },
-    "homepage": "https://a-vision.github.io/vue-input-components/",
-    "keywords": [
-        "vue",
-        "vue3",
-        "components",
-        "input",
-        "form",
-        "typescript",
-        "file-upload",
-        "text-input",
-        "date-picker",
-        "dropdown",
-        "textarea"
-    ],
-    "type": "module",
-    "files": [
-        "src",
-        "types",
-        "dist"
-    ],
-    "main": "./dist/vue-input-components.cjs.js",
-    "module": "./dist/vue-input-components.es.js",
-    "types": "./dist/src/index.d.ts",
-    "exports": {
-        ".": {
-            "types": "./dist/src/index.d.ts",
-            "import": "./dist/vue-input-components.es.js",
-            "require": "./dist/vue-input-components.cjs.js"
-        },
-        "./global": {
-            "types": "./dist/src/global.d.ts"
-        },
-        "./dist/*": "./dist/*",
-        "./styles.css": "./dist/vue-input-components.css",
-        "./styles": "./dist/vue-input-components.css"
+    "./global": {
+      "types": "./dist/src/global.d.ts"
     },
-    "sideEffects": [
-        "**/*.css"
-    ],
-    "scripts": {
-        "dev": "vite",
-        "build": "vite build",
-        "preview": "vite preview",
-        "test": "vitest"
-    },
-    "peerDependencies": {
-        "vue": "^3.5.0"
-    },
-    "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"
-    },
-    "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",
-        "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"
-    },
-    "engines": {
-        "node": ">=18.0.0"
-    },
-    "publishConfig": {
-        "access": "public"
-    }
-}
+    "./dist/*": "./dist/*",
+    "./styles.css": "./dist/vue-input-components.css",
+    "./styles": "./dist/vue-input-components.css"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "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"
+  },
+  "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",
+    "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"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

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"
@@ -135,7 +135,7 @@
               v-for="column in columns"
               :key="column.key"
               class="list__cell"
-              :class="`list__cell--${column.align || 'left'}`"
+              :class="`${getCellClasses(row, column)} list__cell--${column.align || 'left'}`"
               :style="{
                 width: column.width,
                 minWidth: column.minWidth,
@@ -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,11 +341,13 @@ 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
 
-      const dateStr = formatDate(value)
       const checkboxValue = value?.modelValue ? 'yes' : 'no'
 
       switch (column.type) {
@@ -354,7 +356,7 @@ const filteredData = computed(() => {
         case 'number':
           return String(value).includes(effectiveFilterValue.value)
         case 'date':
-          return dateStr.toLowerCase().includes(effectiveFilterValue.value)
+          return formatDate(value).toLowerCase().includes(effectiveFilterValue.value)
         case 'checkbox':
           return checkboxValue.includes(effectiveFilterValue.value)
         default:
@@ -365,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({
@@ -414,6 +437,16 @@ defineExpose({
     filterValue.value = ''
   },
 })
+
+const getCellClasses = (row: any, column: ListColumn) => {
+  if (!column.cellClasses) return ''
+
+  return Object.entries(column.cellClasses)
+    .map(([key, value]) => {
+      return value(row[column.key]) ? key : ''
+    })
+    .join(' ')
+}
 </script>
 
 <style scoped>

package/src/types/list.ts

@@ -1,65 +1,89 @@
-import { ListActionProps } from './action';
+import { ListActionProps } from './action'
 
-type ListPresentation = 'default' | 'minimal';
+type ListPresentation = 'default' | 'minimal'
 
-type ListDataType = 'text' | 'number' | 'date' | 'action' | 'checkbox' | 'icon' | 'email' | 'datetime' | 'time';
+type ListDataType =
+  | 'text'
+  | 'number'
+  | 'date'
+  | 'action'
+  | 'checkbox'
+  | 'icon'
+  | 'email'
+  | 'datetime'
+  | 'time'
 
 interface ListAction {
-  id: string;
-  label?: string;
-  icon?: string;
-  color?: string;
-  href?: string;
-  onClick?: (item: any) => void;
-  onActionClick?: (item: any, action: any) => void;
+  id: string
+  label?: string
+  icon?: string
+  color?: string
+  href?: string
+  onClick?: (item: any) => void
+  onActionClick?: (item: any, action: any) => void
+}
+
+interface conditionalClassList {
+  [key: string]: (value: any) => boolean
 }
 
 interface ListColumn {
-  key: string;
-  label: string;
-  type?: ListDataType;
-  align?: 'left' | 'center' | 'right';
-  sortable?: boolean;
-  filterable?: boolean;
-  width?: string;
-  minWidth?: string;
-  maxWidth?: string;
+  key: string
+  label: string
+  type?: ListDataType
+  align?: 'left' | 'center' | 'right'
+  sortable?: boolean
+  filterable?: boolean
+  width?: string
+  minWidth?: string
+  maxWidth?: string
+  cellClasses?: conditionalClassList
+  headerTooltip?: string
 }
 
 interface ListFilter {
-  placeholder?: string;
-  debounce?: number;
+  placeholder?: string
+  debounce?: number
 }
 
 interface ListProps {
-  columns: ListColumn[];
-  data: any[];
-  actions?: ListActionProps[];
-  CSVDownload?: string;
+  columns: ListColumn[]
+  data: ListRowData[]
+  actions?: ListActionProps[]
+  CSVDownload?: string
   filter?: {
-    placeholder?: string;
-  };
-  loading?: boolean;
-  emptyMessage?: string;
-  presentation?: 'default' | 'minimal';
-  width?: string;
+    placeholder?: string
+  }
+  loading?: boolean
+  emptyMessage?: string
+  presentation?: 'default' | 'minimal'
+  width?: string
 }
 
 interface ListEmits {
-  (e: 'update:filter', value: string): void;
-  (e: 'row-click', row: any, index: number): void;
-  (e: 'row-dblclick', row: any, index: number): void;
+  (e: 'update:filter', value: string): void
+  (e: 'row-click', row: any, index: number): void
+  (e: 'row-dblclick', row: any, index: number): void
 }
 
 interface ListComponent {
-  focus: () => void;
-  blur: () => void;
-  clearFilter: () => void;
+  focus: () => void
+  blur: () => void
+  clearFilter: () => void
 }
 
 interface ListIconProps {
-  icon: string;
-  color?: string;
+  icon: string
+  color?: string
+}
+
+interface ListRowData {
+  excludeFromSort?: boolean
+  excludeFromFilter?: boolean
+  fixed?: 'top' | 'bottom'
+  selected?: boolean
+  class?: string
+  [key: string]: any
 }
 
 export type {
@@ -71,4 +95,5 @@ export type {
   ListIconProps,
   ListColumn,
   ListFilter,
-};
+  ListRowData,
+}