Fixed #1836 - For SelectButton

pull/1846/head
mertsincan 2021-12-01 17:16:58 +03:00
parent 7ec9d396e9
commit 6b46bb49c3
1 changed files with 101 additions and 17 deletions

View File

@ -1,33 +1,117 @@
import { VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
type SelectButtonOptionLabelType = string | ((data: any) => string) | undefined;
type SelectButtonOptionValueType = string | ((data: any) => any) | undefined;
type SelectButtonOptionDisabledType = string | ((data: any) => boolean) | undefined;
interface SelectButtonProps {
export interface SelectButtonChangeEvent {
/**
* Browser event.
*/
originalEvent: Event;
/**
* Single value or an array of values that are selected.
*/
value: any;
}
export interface SelectButtonProps {
/**
* Value of the component.
*/
modelValue?: any;
options?: any[];
/**
* An array of selectitems to display as the available options.
*/
options?: any[] | undefined;
/**
* Property name or getter function to use as the label of an option.
*/
optionLabel?: SelectButtonOptionLabelType;
/**
* Property name or getter function to use as the value of an option, defaults to the option itself when not defined.
*/
optionValue?: SelectButtonOptionValueType;
/**
* Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.
*/
optionDisabled?: SelectButtonOptionDisabledType;
multiple?: boolean;
disabled?: boolean;
dataKey?: string;
ariaLabelledBy?: string;
/**
* When specified, allows selecting multiple values.
*/
multiple?: boolean | undefined;
/**
* When present, it specifies that the element should be disabled.
*/
disabled?: boolean | undefined;
/**
* A property to uniquely identify an option.
*/
dataKey?: string | undefined;
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/
ariaLabelledBy?: string | undefined;
}
interface SelectButtonOptionSlotInterface {
option: any;
index: number;
export interface SelectButtonSlots {
/**
* Custom content for each option.
* @param {Object} scope - option slot's params.
*/
option: (scope: {
/**
* Option instance
*/
option: any;
/**
* Index of the option
*/
index: number;
}) => VNode[];
}
declare class SelectButton {
$props: SelectButtonProps;
$emit(eventName: 'update:modelValue', value: any): this;
$emit(eventName: 'change', event: {originalEvent: Event, value: any}): this;
$emit(eventName: 'focus', event: Event): this;
$emit(eventName: 'blur', event: Event): this;
$slots: {
option: SelectButtonOptionSlotInterface;
export declare type SelectButtonEmits = {
/**
* Emitted when the value changes.
* @param {*} value - New value.
*/
'update:modelValue': (value: any) => void;
/**
* Callback to invoke on value change.
* @param {SelectButtonChangeEvent} event - Custom change event.
*/
'change': (event: SelectButtonChangeEvent) => void;
/**
* Callback to invoke on focus.
* @param {SelectButtonChangeEvent} event - Browser event.
*/
'focus': (event: Event) => void;
/**
* Callback to invoke on blur.
* @param {Event} event - Browser event.
*/
'blur': (event: Event) => void;
}
declare class SelectButton extends ClassComponent<SelectButtonProps, SelectButtonSlots, SelectButtonEmits> { }
declare module '@vue/runtime-core' {
interface GlobalComponents {
SelectButton: GlobalComponentConstructor<SelectButton>
}
}
/**
*
* SelectButton is a form component to choose a value from a list of options using button elements.
*
* Demos:
*
* - [SelectButton](https://www.primefaces.org/primevue/showcase/#/selectbutton)
*
*/
export default SelectButton;