diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue index f9068c62fa..e85c0ecbc1 100644 --- a/src/runtime/components/data/Table.vue +++ b/src/runtime/components/data/Table.vue @@ -7,7 +7,13 @@ - + import { computed, defineComponent, toRaw, toRef } from 'vue' -import type { PropType } from 'vue' +import type { PropType, AriaAttributes } from 'vue' import { upperFirst } from 'scule' import { defu } from 'defu' import { useVModel } from '@vueuse/core' @@ -107,6 +113,15 @@ function defaultSort (a: any, b: any, direction: 'asc' | 'desc') { } } +interface Column { + key: string + sortable?: boolean + sort?: (a: any, b: any, direction: 'asc' | 'desc') => number + direction?: 'asc' | 'desc' + class?: string + [key: string]: any +} + export default defineComponent({ components: { UIcon, @@ -129,7 +144,7 @@ export default defineComponent({ default: () => [] }, columns: { - type: Array as PropType<{ key: string, sortable?: boolean, sort?: (a: any, b: any, direction: 'asc' | 'desc') => number, direction?: 'asc' | 'desc', class?: string, [key: string]: any }[]>, + type: Array as PropType, default: null }, columnAttribute: { @@ -292,6 +307,26 @@ export default defineComponent({ return get(row, rowKey, defaultValue) } + function getAriaSort (column: Column): AriaAttributes['aria-sort'] { + if (!column.sortable) { + return undefined + } + + if (sort.value.column !== column.key) { + return 'none' + } + + if (sort.value.direction === 'asc') { + return 'ascending' + } + + if (sort.value.direction === 'desc') { + return 'descending' + } + + return undefined + } + return { // eslint-disable-next-line vue/no-dupe-keys ui, @@ -312,7 +347,8 @@ export default defineComponent({ onSort, onSelect, onChange, - getRowData + getRowData, + getAriaSort } } })