vuetifyjs / vuetify
1
import { VNode, VNodeChildrenArrayContents } from 'vue'
2 1
import mixins from '../../util/mixins'
3 1
import VSelect from '../VSelect/VSelect'
4 1
import VChip from '../VChip'
5 1
import header from './mixins/header'
6 1
import { wrapInArray } from '../../util/helpers'
7

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

11
  props: {
12
    sortByText: {
13
      type: String,
14
      default: '$vuetify.dataTable.sortBy',
15
    },
16
  },
17

18
  methods: {
19 1
    genSortChip (props: any) {
20 1
      const children: VNodeChildrenArrayContents = [props.item.text]
21

22 1
      const sortIndex = this.options.sortBy.findIndex(k => k === props.item.value)
23 1
      const beingSorted = sortIndex >= 0
24 1
      const isDesc = this.options.sortDesc[sortIndex]
25

26 1
      children.push(this.$createElement('div', {
27
        staticClass: 'v-chip__close',
28
        class: {
29
          sortable: true,
30
          active: beingSorted,
31 1
          asc: beingSorted && !isDesc,
32 1
          desc: beingSorted && isDesc,
33
        },
34
      }, [this.genSortIcon()]))
35

36 1
      return this.$createElement(VChip, {
37
        staticClass: 'sortable',
38
        on: {
39 0
          click: (e: MouseEvent) => {
40 0
            e.stopPropagation()
41 0
            this.$emit('sort', props.item.value)
42
          },
43
        },
44
      }, children)
45
    },
46 1
    genSortSelect (items: any[]) {
47 1
      return this.$createElement(VSelect, {
48
        props: {
49
          label: this.$vuetify.lang.t(this.sortByText),
50
          items,
51
          hideDetails: true,
52
          multiple: this.options.multiSort,
53 1
          value: this.options.multiSort ? this.options.sortBy : this.options.sortBy[0],
54
          menuProps: { closeOnContentClick: true },
55
        },
56
        on: {
57 1
          change: (v: string | string[]) => this.$emit('sort', v),
58
        },
59
        scopedSlots: {
60 1
          selection: props => this.genSortChip(props),
61
        },
62
      })
63
    },
64
  },
65

66 1
  render (h): VNode {
67 1
    const children: VNodeChildrenArrayContents = []
68

69 1
    const header = this.headers.find(h => h.value === 'data-table-select')
70 1
    if (header && !this.singleSelect) {
71 1
      children.push(this.$createElement('div', {
72
        class: [
73
          'v-data-table-header-mobile__select',
74
          ...wrapInArray(header.class),
75
        ],
76
        attrs: {
77
          width: header.width,
78
        },
79
      }, [this.genSelectAll()]))
80
    }
81

82 1
    const sortHeaders = this.headers
83 1
      .filter(h => h.sortable !== false && h.value !== 'data-table-select')
84 1
      .map(h => ({
85
        text: h.text,
86
        value: h.value,
87
      }))
88

89 1
    if (!this.disableSort && sortHeaders.length) {
90 1
      children.push(this.genSortSelect(sortHeaders))
91
    }
92

93 1
    const th = h('th', [h('div', { staticClass: 'v-data-table-header-mobile__wrapper' }, children)])
94

95 1
    const tr = h('tr', [th])
96

97 1
    return h('thead', {
98
      staticClass: 'v-data-table-header v-data-table-header-mobile',
99
    }, [tr])
100
  },
101
})

Read our documentation on viewing source code .

Loading