vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 17:02:38 +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

18
components/lib/togglebutton/ToggleButton.d.ts vendored
View file

@ -12,12 +12,12 @@ import { ComponentHooks } from '../basecomponent';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type ToggleButtonPassThroughOptionType = ToggleButtonPassThroughAttributes | ((options: ToggleButtonPassThroughMethodOptions) => ToggleButtonPassThroughAttributes | string) | string | null | undefined;
export declare type ToggleButtonPassThroughOptionType<T = any> = ToggleButtonPassThroughAttributes | ((options: ToggleButtonPassThroughMethodOptions<T = any>) => ToggleButtonPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface ToggleButtonPassThroughMethodOptions {
export interface ToggleButtonPassThroughMethodOptions<T = any> {
/**
* Defines instance.
*/
@ -37,7 +37,7 @@ export interface ToggleButtonPassThroughMethodOptions {
/**
* Defines parent options.
*/
parent: any;
parent: T;
/**
* Defines passthrough(pt) options in global config.
*/
@ -48,19 +48,19 @@ export interface ToggleButtonPassThroughMethodOptions {
* Custom passthrough(pt) options.
* @see {@link ToggleButtonProps.pt}
*/
export interface ToggleButtonPassThroughOptions {
export interface ToggleButtonPassThroughOptions<T = any> {
/**
* Used to pass attributes to the root's DOM element.
*/
root?: ToggleButtonPassThroughOptionType;
root?: ToggleButtonPassThroughOptionType<T>;
/**
* Used to pass attributes to the icon's DOM element.
*/
icon?: ToggleButtonPassThroughOptionType;
icon?: ToggleButtonPassThroughOptionType<T>;
/**
* Used to pass attributes to the label's DOM element.
*/
label?: ToggleButtonPassThroughOptionType;
label?: ToggleButtonPassThroughOptionType<T>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
@ -173,6 +173,10 @@ export interface ToggleButtonProps {
* Defines valid slots in ToggleButton component.
*/
export interface ToggleButtonSlots {
/**
* Custom content such as icons, images and text can be placed inside the button via the default slot.
*/
default(): VNode[];
/**
* Custom icon template.
* @param {Object} scope - icon slot's params.

8
components/lib/togglebutton/ToggleButton.vue
View file

@ -1,9 +1,11 @@
<template>
<button v-ripple type="button" :class="cx('root')" :tabindex="tabindex" :disabled="disabled" :aria-pressed="modelValue" @click="onChange" v-bind="getPTOptions('root')" :data-p-highlight="active" :data-p-disabled="disabled">
<slot name="icon" :value="modelValue" :class="cx('icon')">
<span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="getPTOptions('icon')" />
<slot>
<slot name="icon" :value="modelValue" :class="cx('icon')">
<span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="getPTOptions('icon')" />
</slot>
<span :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span>
</slot>
<span :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span>
</button>
</template>