vuetify-wcag/lib/components/VDataTable/mixins/header.js

VuetifyJS but then WCAG/A11Y compatible

import VBtn from '../../VBtn';
import VIcon from '../../VIcon';
import VCheckbox from '../../VCheckbox/VCheckbox';
import ripple from '../../../directives/ripple';
import mixins from '../../../util/mixins';
export default mixins().extend({
  // https://github.com/vuejs/vue/issues/6872
  directives: {
    ripple
  },
  props: {
    headers: {
      type: Array,
      default: () => []
    },
    options: {
      type: Object,
      default: () => ({
        page: 1,
        itemsPerPage: 10,
        sortBy: [],
        sortDesc: [],
        groupBy: [],
        groupDesc: [],
        multiSort: false,
        mustSort: false
      })
    },
    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() {
      var _a;

      const data = {
        props: {
          value: this.everyItem,
          indeterminate: !this.everyItem && this.someItems,
          color: (_a = this.checkboxColor) !== null && _a !== void 0 ? _a : ''
        },
        attrs: {
          'aria-label': this.$vuetify.lang.t(this.everyItem ? this.deselectHeaderAriaLabel : this.selectHeaderAriaLabel)
        },
        on: {
          change: v => 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, ariaSort) {
      return this.$createElement(VBtn, {
        props: {
          icon: true
        },
        attrs: {
          'aria-label': ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : undefined,
          'aria-sort': ariaSort !== null && ariaSort !== void 0 ? ariaSort : undefined
        }
      }, [this.$createElement(VIcon, {
        staticClass: 'v-data-table-header__icon',
        props: {
          size: 18
        }
      }, this.sortIcon)]);
    }

  }
});
//# sourceMappingURL=header.js.map