-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b1d44b2
commit 2fde235
Showing
1 changed file
with
88 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,27 +1,100 @@ | ||
import { VNode } from 'vue'; | ||
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; | ||
|
||
interface ChipsProps { | ||
export interface ChipsAddEvent { | ||
/** | ||
* Browser event. | ||
*/ | ||
originalEvent: Event; | ||
/** | ||
* Added/Removed item value. | ||
*/ | ||
value: any; | ||
} | ||
|
||
/** | ||
* @extends ChipsAddEvent | ||
*/ | ||
export interface ChipsRemoveEvent extends ChipsAddEvent { } | ||
|
||
export interface ChipsProps { | ||
/** | ||
* Value of the component. | ||
*/ | ||
modelValue?: any[]; | ||
max?: number; | ||
addOnBlur?: boolean; | ||
allowDuplicate?: boolean; | ||
separator?: string; | ||
class?: string; | ||
/** | ||
* Maximum number of entries allowed. | ||
*/ | ||
max?: number | undefined; | ||
/** | ||
* Whether to add an item when the input loses focus. | ||
*/ | ||
addOnBlur?: boolean | undefined; | ||
/** | ||
* Whether to allow duplicate values or not. | ||
* Default value is true. | ||
*/ | ||
allowDuplicate?: boolean | undefined; | ||
/** | ||
* Separator char to add an item when pressed in addition to the enter key. Currently only possible value is "," | ||
*/ | ||
separator?: string | undefined; | ||
/** | ||
* Style class of the component input field. | ||
*/ | ||
class?: string | undefined; | ||
/** | ||
* Inline style of the component. | ||
*/ | ||
style?: any; | ||
} | ||
|
||
interface ChipsChipSlotInterface { | ||
value: any; | ||
export interface ChipsSlots { | ||
/** | ||
* Custom chip template. | ||
* @param {Object} scope - chip slot's params. | ||
*/ | ||
chip: (scope: { | ||
/** | ||
* Value of the component | ||
*/ | ||
value: any; | ||
}) => VNode[]; | ||
} | ||
|
||
export declare type ChipsEmits = { | ||
/** | ||
* Emitted when the value changes. | ||
* @param {*} value - New value. | ||
*/ | ||
'update:modelValue': (value: any[]) => void; | ||
/** | ||
* Callback to invoke when a chip is added. | ||
* @param {ChipsAddEvent} event - Custom add event. | ||
*/ | ||
'add': (event: ChipsAddEvent) => void; | ||
/** | ||
* Callback to invoke when a chip is removed. | ||
* @param {ChipsRemoveEvent} event - Custom remove event. | ||
*/ | ||
'remove': (event: ChipsRemoveEvent) => void; | ||
} | ||
|
||
declare class Chips { | ||
$props: ChipsProps; | ||
$emit(eventName: 'update:modelValue', value: any[]): this; | ||
$emit(eventName: 'add', e: { originalEvent: Event, value: any }): this; | ||
$emit(eventName: 'remove', e: { originalEvent: Event, value: any }): this; | ||
$slots: { | ||
chip: ChipsChipSlotInterface; | ||
declare class Chips extends ClassComponent<ChipsProps, ChipsSlots, ChipsEmits> { } | ||
|
||
declare module '@vue/runtime-core' { | ||
interface GlobalComponents { | ||
Chips: GlobalComponentConstructor<Chips> | ||
} | ||
} | ||
|
||
/** | ||
* | ||
* Chips is used to enter multiple values on an input field. | ||
* | ||
* Demos: | ||
* | ||
* - [Chips](https://www.primefaces.org/primevue/showcase/#/chips) | ||
* | ||
*/ | ||
export default Chips; |