Refactor #5426 - For SelectButton
tugcekucukoglu
parent
dc77753537
commit
dd07a0544b
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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>
|
||||
</button>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue