Refactor #3922 - For SelectButton

pull/3938/head
Tuğçe Küçükoğlu 2023-05-09 11:43:08 +03:00
parent cae74f5c97
commit 515ae35fc5
2 changed files with 27 additions and 2 deletions

View File

@ -18,6 +18,7 @@ export declare type SelectButtonPassThroughOptionType = SelectButtonPassThroughA
export interface SelectButtonPassThroughMethodOptions { export interface SelectButtonPassThroughMethodOptions {
props: SelectButtonProps; props: SelectButtonProps;
state: SelectButtonState; state: SelectButtonState;
context: SelectButtonContext;
} }
/** /**
@ -71,6 +72,22 @@ export interface SelectButtonState {
focusedIndex: number; focusedIndex: number;
} }
/**
* Defines current options in SelectButton component.
*/
export interface SelectButtonContext {
/**
* Current active state of the item as a boolean.
* @defaultValue false
*/
active: boolean;
/**
* Current focused state of item as a boolean.
* @defaultValue false
*/
focused: boolean;
}
/** /**
* Defines valid properties in SelectButton component. * Defines valid properties in SelectButton component.
*/ */

View File

@ -14,10 +14,10 @@
@keydown="onKeydown($event, option, i)" @keydown="onKeydown($event, option, i)"
@focus="onFocus($event)" @focus="onFocus($event)"
@blur="onBlur($event, option)" @blur="onBlur($event, option)"
v-bind="ptm('button')" v-bind="getPTOptions(option, 'button')"
> >
<slot name="option" :option="option" :index="i"> <slot name="option" :option="option" :index="i">
<span class="p-button-label" v-bind="ptm('label')">{{ getOptionLabel(option) }}</span> <span class="p-button-label" v-bind="getPTOptions(option, 'label')">{{ getOptionLabel(option) }}</span>
</slot> </slot>
</div> </div>
</div> </div>
@ -78,6 +78,14 @@ export default {
getOptionRenderKey(option) { getOptionRenderKey(option) {
return this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option); return this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option);
}, },
getPTOptions(option, key) {
return this.ptm(key, {
context: {
active: this.isSelected(option),
disabled: this.isOptionDisabled(option)
}
});
},
isOptionDisabled(option) { isOptionDisabled(option) {
return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false; return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
}, },