Refactor #5437 - For SelectButton
tugcekucukoglu
parent
2a48188286
commit
32de6971aa
|
|
@ -1,19 +1,13 @@
|
|||
<template>
|
||||
<div ref="container" :class="cx('root')" role="group" :aria-labelledby="ariaLabelledby" v-bind="ptmi('root')">
|
||||
<div
|
||||
<div :class="cx('root')" role="group" :aria-labelledby="ariaLabelledby" v-bind="ptmi('root')">
|
||||
<button
|
||||
v-for="(option, i) of options"
|
||||
:key="getOptionRenderKey(option)"
|
||||
v-ripple
|
||||
:tabindex="findTabindex(option, i)"
|
||||
:aria-label="getOptionLabel(option, i)"
|
||||
:role="multiple ? 'checkbox' : 'radio'"
|
||||
:aria-checked="isSelected(option)"
|
||||
:aria-pressed="isSelected(option)"
|
||||
:aria-disabled="isOptionDisabled(option)"
|
||||
:class="cx('button', { option })"
|
||||
@click="onOptionSelect($event, option, i)"
|
||||
@keydown="onKeydown($event, option, i)"
|
||||
@focus="onFocus($event)"
|
||||
@blur="onBlur($event, option)"
|
||||
v-bind="getPTOptions(option, 'button')"
|
||||
:data-p-highlight="isSelected(option)"
|
||||
:data-p-disabled="isOptionDisabled(option)"
|
||||
|
|
@ -21,44 +15,22 @@
|
|||
<slot name="option" :option="option" :index="i" :class="cx('label')">
|
||||
<span :class="cx('label')" v-bind="getPTOptions(option, 'label')">{{ getOptionLabel(option) }}</span>
|
||||
</slot>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Ripple from 'primevue/ripple';
|
||||
import { DomHandler, ObjectUtils } from 'primevue/utils';
|
||||
import { ObjectUtils } from 'primevue/utils';
|
||||
import BaseSelectButton from './BaseSelectButton.vue';
|
||||
|
||||
export default {
|
||||
name: 'SelectButton',
|
||||
extends: BaseSelectButton,
|
||||
inheritAttrs: false,
|
||||
emits: ['update:modelValue', 'focus', 'blur', 'change'],
|
||||
data() {
|
||||
return {
|
||||
focusedIndex: 0
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.defaultTabIndexes();
|
||||
},
|
||||
emits: ['update:modelValue', 'change'],
|
||||
methods: {
|
||||
defaultTabIndexes() {
|
||||
let opts = DomHandler.find(this.$refs.container, '[data-pc-section="button"]');
|
||||
let firstHighlight = DomHandler.findSingle(this.$refs.container, '[data-p-highlight="true"]');
|
||||
|
||||
for (let i = 0; i < opts.length; i++) {
|
||||
if ((DomHandler.getAttribute(opts[i], 'data-p-highlight') === true && ObjectUtils.equals(opts[i], firstHighlight)) || (firstHighlight === null && i == 0)) {
|
||||
this.focusedIndex = i;
|
||||
}
|
||||
}
|
||||
},
|
||||
getOptionLabel(option, index) {
|
||||
if (this.$parent.$name === 'DataViewLayoutOptions') {
|
||||
return index === 0 ? this.$parent.listViewAriaLabel : this.$parent.gridViewAriaLabel;
|
||||
}
|
||||
|
||||
getOptionLabel(option) {
|
||||
return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option;
|
||||
},
|
||||
getOptionValue(option) {
|
||||
|
|
@ -122,89 +94,6 @@ export default {
|
|||
}
|
||||
|
||||
return selected;
|
||||
},
|
||||
onKeydown(event, option, index) {
|
||||
switch (event.code) {
|
||||
case 'Space': {
|
||||
this.onOptionSelect(event, option, index);
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
|
||||
case 'ArrowDown':
|
||||
|
||||
case 'ArrowRight': {
|
||||
this.onArrowRightKey(event.target);
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
|
||||
case 'ArrowUp':
|
||||
|
||||
case 'ArrowLeft': {
|
||||
this.onArrowLeftKey(event.target);
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
|
||||
default:
|
||||
//no op
|
||||
break;
|
||||
}
|
||||
},
|
||||
onArrowRightKey(target) {
|
||||
const nextEl = this.findNextElement(target);
|
||||
|
||||
if (nextEl) {
|
||||
this.focusedIndex = ObjectUtils.findIndexInList(nextEl, this.findAllElements());
|
||||
DomHandler.focus(nextEl);
|
||||
}
|
||||
},
|
||||
onArrowLeftKey(target) {
|
||||
const prevEl = this.findPrevElement(target);
|
||||
|
||||
if (prevEl) {
|
||||
this.focusedIndex = ObjectUtils.findIndexInList(prevEl, this.findAllElements());
|
||||
DomHandler.focus(prevEl);
|
||||
}
|
||||
},
|
||||
findAllElements() {
|
||||
return DomHandler.find(this.$refs.container, '[data-pc-section="button"]');
|
||||
},
|
||||
findNextElement(target) {
|
||||
if (target.nextElementSibling) {
|
||||
if (DomHandler.getAttribute(target.nextElementSibling, 'data-p-disabled')) {
|
||||
return this.findNextElement(target.nextElementSibling);
|
||||
}
|
||||
|
||||
return target.nextElementSibling;
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
findPrevElement(target) {
|
||||
if (target.previousElementSibling) {
|
||||
if (DomHandler.getAttribute(target.previousElementSibling, 'data-p-disabled')) {
|
||||
return this.findPrevElement(target.previousElementSibling);
|
||||
}
|
||||
|
||||
return target.previousElementSibling;
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
onFocus(event) {
|
||||
this.$emit('focus', event);
|
||||
},
|
||||
onBlur(event, option) {
|
||||
if (event.target && event.relatedTarget && event.target.parentElement !== event.relatedTarget.parentElement) {
|
||||
this.defaultTabIndexes();
|
||||
}
|
||||
|
||||
this.$emit('blur', event, option);
|
||||
},
|
||||
findTabindex(option, index) {
|
||||
return this.disabled || this.isOptionDisabled(option) || index !== this.focusedIndex ? '-1' : '0';
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue