vuetify-wcag
Version:
VuetifyJS but then WCAG/A11Y compatible
93 lines (82 loc) • 2.25 kB
JavaScript
// Mixins
import { factory as GroupableFactory } from '../../mixins/groupable';
import Routable from '../../mixins/routable';
import Themeable from '../../mixins/themeable'; // Utilities
import { keyCodes } from './../../util/helpers';
import mixins from '../../util/mixins';
const baseMixins = mixins(Routable, // Must be after routable
// to overwrite activeClass
GroupableFactory('tabsBar'), Themeable);
export default baseMixins.extend().extend().extend({
name: 'v-tab',
props: {
ripple: {
type: [Boolean, Object],
default: true
}
},
data: () => ({
proxyClass: 'v-tab--active'
}),
computed: {
classes() {
return {
'v-tab': true,
...Routable.options.computed.classes.call(this),
'v-tab--disabled': this.disabled,
...this.groupClasses
};
},
value() {
let to = this.to || this.href;
if (to == null) return to;
if (this.$router && this.to === Object(this.to)) {
const resolve = this.$router.resolve(this.to, this.$route, this.append);
to = resolve.href;
}
return to.replace('#', '');
}
},
methods: {
click(e) {
// Prevent keyboard actions
// from children elements
// within disabled tabs
if (this.disabled) {
e.preventDefault();
return;
} // If user provides an
// actual link, do not
// prevent default
if (this.href && this.href.indexOf('#') > -1) e.preventDefault();
if (e.detail) this.$el.blur();
this.$emit('click', e);
this.to || this.toggle();
},
toggle() {
// VItemGroup treats a change event as a click
if (!this.isActive || !this.tabsBar.mandatory && !this.to) {
this.$emit('change');
}
}
},
render(h) {
const {
tag,
data
} = this.generateRouteLink();
data.attrs = { ...data.attrs,
'aria-selected': String(this.isActive),
role: 'tab',
tabindex: this.isActive ? 0 : -1
};
data.on = { ...data.on,
keydown: e => {
if (e.keyCode === keyCodes.enter) this.click(e);
this.$emit('keydown', e);
}
};
return h(tag, data, this.$slots.default);
}
});
//# sourceMappingURL=VTab.js.map