vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-08 16:37:15 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #3965 - For SelectButton

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-05-25 17:09:22 +03:00
parent e562695287
commit 808b7625ac
3 changed files with 57 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

55
components/lib/selectbutton/SelectButton.vue
View file

@ -1,5 +1,5 @@
<template>
<div ref="container" :class="containerClass" role="group" :aria-labelledby="ariaLabelledby" v-bind="ptm('root')">
<div ref="container" :class="cx('root')" role="group" :aria-labelledby="ariaLabelledby" v-bind="ptm('root')">
<div
v-for="(option, i) of options"
:key="getOptionRenderKey(option)"
@ -9,47 +9,31 @@
:role="multiple ? 'checkbox' : 'radio'"
:aria-checked="isSelected(option)"
:aria-disabled="optionDisabled"
:class="getButtonClass(option, i)"
: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)"
>
<slot name="option" :option="option" :index="i">
<span class="p-button-label" v-bind="getPTOptions(option, 'label')">{{ getOptionLabel(option) }}</span>
<slot name="option" :option="option" :index="i" :class="cx('label')">
<span :class="cx('label')" v-bind="getPTOptions(option, 'label')">{{ getOptionLabel(option) }}</span>
</slot>
</div>
</div>
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import Ripple from 'primevue/ripple';
import { DomHandler, ObjectUtils } from 'primevue/utils';
import BaseSelectButton from './BaseSelectButton.vue';
export default {
name: 'SelectButton',
extends: BaseComponent,
extends: BaseSelectButton,
emits: ['update:modelValue', 'focus', 'blur', 'change'],
props: {
modelValue: null,
options: Array,
optionLabel: null,
optionValue: null,
optionDisabled: null,
multiple: Boolean,
unselectable: {
type: Boolean,
default: false
},
disabled: Boolean,
dataKey: null,
'aria-labelledby': {
type: String,
default: null
}
},
data() {
return {
focusedIndex: 0
@ -60,11 +44,11 @@ export default {
},
methods: {
defaultTabIndexes() {
let opts = DomHandler.find(this.$refs.container, '.p-button');
let firstHighlight = DomHandler.findSingle(this.$refs.container, '.p-highlight');
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.hasClass(opts[i], 'p-highlight') && ObjectUtils.equals(opts[i], firstHighlight)) || (firstHighlight === null && i == 0)) {
if ((DomHandler.getAttribute(opts[i], 'data-p-highlight') === true && ObjectUtils.equals(opts[i], firstHighlight)) || (firstHighlight === null && i == 0)) {
this.focusedIndex = i;
}
}
@ -189,26 +173,9 @@ export default {
}
this.$emit('blur', event, option);
},
getButtonClass(option) {
return [
'p-button p-component',
{
'p-highlight': this.isSelected(option),
'p-disabled': this.isOptionDisabled(option)
}
];
}
},
computed: {
containerClass() {
return [
'p-selectbutton p-buttonset p-component',
{
'p-disabled': this.disabled
}
];
},
equalityKey() {
return this.optionValue ? null : this.dataKey;
}