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

Refactor #5426 - For SelectButton

Browse source
This commit is contained in:
tugcekucukoglu 2024-03-26 13:25:08 +03:00
parent dc77753537
commit dd07a0544b
4 changed files with 37 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

15
components/lib/selectbutton/SelectButton.d.ts vendored
View file

@ -10,14 +10,15 @@
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { PassThroughOptions } from '../passthrough';
// import { ToggleButtonPassThroughOptions } from '../togglebutton';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type SelectButtonPassThroughOptionType<T = any> = SelectButtonPassThroughAttributes | ((options: SelectButtonPassThroughMethodOptions<T>) => SelectButtonPassThroughAttributes | string) | string | null | undefined;
export declare type SelectButtonPassThroughOptionType = SelectButtonPassThroughAttributes | ((options: SelectButtonPassThroughMethodOptions) => SelectButtonPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface SelectButtonPassThroughMethodOptions<T = any> {
export interface SelectButtonPassThroughMethodOptions {
/**
* Defines instance.
*/
@ -41,7 +42,7 @@ export interface SelectButtonPassThroughMethodOptions<T = any> {
/**
* Defines parent options.
*/
parent: T;
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/
@ -52,19 +53,19 @@ export interface SelectButtonPassThroughMethodOptions<T = any> {
* Custom passthrough(pt) options.
* @see {@link SelectButtonProps.pt}
*/
export interface SelectButtonPassThroughOptions<T = any> {
export interface SelectButtonPassThroughOptions {
/**
* Used to pass attributes to the root's DOM element.
*/
root?: SelectButtonPassThroughOptionType<T>;
root?: SelectButtonPassThroughOptionType;
/**
* Used to pass attributes to the button's DOM element.
*/
button?: SelectButtonPassThroughOptionType<T>;
button?: SelectButtonPassThroughOptionType;
/**
* Used to pass attributes to the label's DOM element.
*/
label?: SelectButtonPassThroughOptionType<T>;
label?: SelectButtonPassThroughOptionType;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

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

@ -1,26 +1,20 @@
<template>
<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
:aria-pressed="isSelected(option)"
:aria-disabled="isOptionDisabled(option)"
:class="cx('button', { option })"
@click="onOptionSelect($event, option, i)"
v-bind="getPTOptions(option, 'button')"
:data-p-highlight="isSelected(option)"
:data-p-disabled="isOptionDisabled(option)"
>
<slot name="option" :option="option" :index="i" :class="cx('label')">
<span :class="cx('label')" v-bind="getPTOptions(option, 'label')">{{ getOptionLabel(option) }}</span>
</slot>
</button>
<template v-for="(option, index) of options" :key="getOptionRenderKey(option)">
<ToggleButton :modelValue="isSelected(option)" :onLabel="getOptionLabel(option)" :offLabel="getOptionLabel(option)" :disabled="disabled" :invalid="invalid" @change="onOptionSelect($event, option, index)" :pt="ptm('button')">
<template v-if="$slots.option" #default>
<slot name="option" :option="option" :index="index">
<span v-bind="ptm('button')['label']">{{ getOptionLabel(option) }}</span>
</slot>
</template>
</ToggleButton>
</template>
</div>
</template>
<script>
import Ripple from 'primevue/ripple';
import ToggleButton from 'primevue/togglebutton';
import { ObjectUtils } from 'primevue/utils';
import BaseSelectButton from './BaseSelectButton.vue';
@ -103,6 +97,9 @@ export default {
},
directives: {
ripple: Ripple
},
components: {
ToggleButton
}
};
</script>