vuetify-wcag/src/components/VDataTable/mixins/header.ts

VuetifyJS but then WCAG/A11Y compatible

import { VDataTable } from '../'
import VBtn from '../../VBtn'
import VIcon from '../../VIcon'
import VCheckbox from '../../VCheckbox/VCheckbox'
import ripple from '../../../directives/ripple'

import Vue from 'vue'
import { PropValidator } from 'vue/types/options'
import mixins from '../../../util/mixins'
import { DataOptions, DataTableHeader } from 'vuetify/types'

type VDataTableInstance = InstanceType<typeof VDataTable>

interface options extends Vue {
  dataTable: VDataTableInstance
}

export default mixins<options>().extend({
  // https://github.com/vuejs/vue/issues/6872
  directives: {
    ripple,
  },

  props: {
    headers: {
      type: Array,
      default: () => ([]),
    } as PropValidator<DataTableHeader[]>,
    options: {
      type: Object,
      default: () => ({
        page: 1,
        itemsPerPage: 10,
        sortBy: [],
        sortDesc: [],
        groupBy: [],
        groupDesc: [],
        multiSort: false,
        mustSort: false,
      }),
    } as PropValidator<DataOptions>,
    checkboxColor: String,
    sortIcon: {
      type: String,
      default: '$sort',
    },
    everyItem: Boolean,
    someItems: Boolean,
    showGroupBy: Boolean,
    singleSelect: Boolean,
    disableSort: Boolean,
    selectHeaderAriaLabel: {
      type: String,
      default: '$vuetify.dataTable.ariaLabel.selectHeaderAriaLabel',
    },
    deselectHeaderAriaLabel: {
      type: String,
      default: '$vuetify.dataTable.ariaLabel.deselectHeaderAriaLabel',
    },
  },

  methods: {
    genSelectAll () {
      const data = {
        props: {
          value: this.everyItem,
          indeterminate: !this.everyItem && this.someItems,
          color: this.checkboxColor ?? '',
        },
        attrs: {
          'aria-label': this.$vuetify.lang.t(this.everyItem ? this.deselectHeaderAriaLabel : this.selectHeaderAriaLabel),
        },
        on: {
          change: (v: boolean) => this.$emit('toggle-select-all', v),
        },
      }

      if (this.$scopedSlots['data-table-select']) {
        return this.$scopedSlots['data-table-select']!(data)
      }

      return this.$createElement(VCheckbox, {
        staticClass: 'v-data-table__checkbox mt-0 pt-0',
        ...data,
        props: {
          dense: true,
          hideDetails: true,
        },
      })
    },
    genSortIcon (ariaLabel?: String, ariaSort?: String) {
      return this.$createElement(VBtn, {
        props: {
          icon: true,
        },
        attrs: {
          'aria-label': ariaLabel ?? undefined,
          'aria-sort': ariaSort ?? undefined,
        },
      }, [this.$createElement(VIcon, {
        staticClass: 'v-data-table-header__icon',
        props: {
          size: 18,
        },
      }, this.sortIcon)])
    },
  },
})