Refactor #3922 - For SelectButton
parent
cae74f5c97
commit
515ae35fc5
|
@ -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.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -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;
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue