vuetifyjs / vuetify
1
// Helpers
2
import { VNode, VNodeData } from 'vue'
3 1
import mixins from '../../util/mixins'
4 1
import header from './mixins/header'
5 1
import { wrapInArray, convertToUnit } from '../../util/helpers'
6
import { DataTableHeader } from 'vuetify/types'
7

8 1
export default mixins(header).extend({
9
  name: 'v-data-table-header-desktop',
10

11
  methods: {
12 1
    genGroupByToggle (header: DataTableHeader) {
13 1
      return this.$createElement('span', {
14
        on: {
15 0
          click: (e: MouseEvent) => {
16 0
            e.stopPropagation()
17 0
            this.$emit('group', header.value)
18
          },
19
        },
20
      }, ['group'])
21
    },
22 1
    getAria (beingSorted: boolean, isDesc: boolean) {
23 1
      const $t = (key: string) => this.$vuetify.lang.t(`$vuetify.dataTable.ariaLabel.${key}`)
24

25 1
      let ariaSort = 'none'
26 1
      let ariaLabel = [
27
        $t('sortNone'),
28
        $t('activateAscending'),
29
      ]
30

31 1
      if (!beingSorted) {
32 1
        return { ariaSort, ariaLabel: ariaLabel.join(' ') }
33
      }
34

35 1
      if (isDesc) {
36 1
        ariaSort = 'descending'
37 1
        ariaLabel = [
38
          $t('sortDescending'),
39 1
          $t(this.options.mustSort ? 'activateAscending' : 'activateNone'),
40
        ]
41
      } else {
42 1
        ariaSort = 'ascending'
43 1
        ariaLabel = [
44
          $t('sortAscending'),
45
          $t('activateDescending'),
46
        ]
47
      }
48

49 1
      return { ariaSort, ariaLabel: ariaLabel.join(' ') }
50
    },
51 1
    genHeader (header: DataTableHeader) {
52 1
      const data: Required<Pick<VNodeData, 'attrs' | 'on' | 'class' | 'style'>> = {
53
        attrs: {
54
          role: 'columnheader',
55
          scope: 'col',
56 1
          'aria-label': header.text || '',
57
        },
58
        style: {
59
          width: convertToUnit(header.width),
60
          minWidth: convertToUnit(header.width),
61
        },
62
        class: [
63 1
          `text-${header.align || 'start'}`,
64
          ...wrapInArray(header.class),
65 1
          header.divider && 'v-data-table__divider',
66
        ],
67
        on: {},
68
      }
69 1
      const children = []
70

71 1
      if (header.value === 'data-table-select' && !this.singleSelect) {
72 0
        return this.$createElement('th', data, [this.genSelectAll()])
73
      }
74

75 1
      children.push(
76
        this.$scopedSlots[header.value]
77 1
          ? this.$scopedSlots[header.value]!({ header })
78 1
          : this.$createElement('span', [header.text])
79
      )
80

81 1
      if (!this.disableSort && (header.sortable || !header.hasOwnProperty('sortable'))) {
82 1
        data.on['click'] = () => this.$emit('sort', header.value)
83

84 1
        const sortIndex = this.options.sortBy.findIndex(k => k === header.value)
85 1
        const beingSorted = sortIndex >= 0
86 1
        const isDesc = this.options.sortDesc[sortIndex]
87

88 1
        data.class.push('sortable')
89

90 1
        const { ariaLabel, ariaSort } = this.getAria(beingSorted, isDesc)
91

92 1
        data.attrs['aria-label'] += `${header.text ? ': ' : ''}${ariaLabel}`
93 1
        data.attrs['aria-sort'] = ariaSort
94

95 1
        if (beingSorted) {
96 1
          data.class.push('active')
97 1
          data.class.push(isDesc ? 'desc' : 'asc')
98
        }
99

100 1
        if (header.align === 'end') children.unshift(this.genSortIcon())
101 1
        else children.push(this.genSortIcon())
102

103 1
        if (this.options.multiSort && beingSorted) {
104 1
          children.push(this.$createElement('span', { class: 'v-data-table-header__sort-badge' }, [String(sortIndex + 1)]))
105
        }
106
      }
107

108 1
      if (this.showGroupBy && header.groupable !== false) children.push(this.genGroupByToggle(header))
109

110 1
      return this.$createElement('th', data, children)
111
    },
112
  },
113

114 1
  render (): VNode {
115 1
    return this.$createElement('thead', {
116
      staticClass: 'v-data-table-header',
117
    }, [
118 1
      this.$createElement('tr', this.headers.map(header => this.genHeader(header))),
119
    ])
120
  },
121
})

Read our documentation on viewing source code .

Loading