@progress/kendo-vue-buttons
Version:
352 lines (351 loc) • 9.6 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { SVGIcon } from '@progress/kendo-vue-common';
import { ChipRemoveEvent, ChipMouseEvent, ChipFocusEvent, ChipKeyboardEvent } from '../models/events';
import { PropType } from 'vue';
/**
* Represents the properties of the Avatar in the Chip.
*/
export interface ChipAvatarProps {
/**
* Sets the image of the avatar.
*/
imageUrl: string;
/**
* Defines the alternative text of the avatar image.
*/
imageAlt: string;
/**
* Configures the `roundness` of the avatar. Default is set to 'medium'.
*/
rounded?: null | 'small' | 'medium' | 'large' | 'full';
/**
* Sets additional CSS styles to the avatar
*/
style?: object;
}
/**
* Represents the properties of [Chip]({% slug overview_chip %}) component.
*/
export interface ChipProps {
/**
* Sets the `id` property of the top div element of the Chip.
*/
id?: string;
/**
* Sets the `tabIndex` attribute.
*/
tabIndex?: number;
/**
* Sets the label text of the Chip.
*/
text?: string;
/**
* Sets the `id` value of the Chip.
*/
value?: any;
/**
* The Chip direction 'ltr' as default or 'rtl'.
*/
dir?: string;
/**
* Determines if the Chip could be removed.
*/
removable?: boolean;
/**
* Determines if the Chip has custom `removeIcon`.
*/
removeIcon?: string;
/**
* Defines an remove SVGIcon to be rendered within the chip.
*/
removeSvgIcon?: SVGIcon;
/**
* Determines if the Chip is disabled.
*/
disabled?: boolean;
/**
* Determines if the Chip has an `icon`.
*/
icon?: string;
/**
* Defines an SVGIcon to be rendered within the chip.
*/
svgIcon?: SVGIcon;
/**
* Determines if the Chip has custom selection `icon`.
*/
selectedIcon?: string;
/**
* Defines an selection SVGIcon to be rendered within the chip.
*/
selectedSvgIcon?: SVGIcon;
/**
* If set to object of type ChipAvatarProps with image and imageAlt it renders a default Avatar. If set to string or a `render` function it
* defines the avatar template that will be shown.
*/
avatar?: string | Function | Object;
/**
* Configures the `size` of the Chip.
*
* The available options are:
* - small
* - medium
* - large
*
* @default `undefined`
*/
size?: 'small' | 'medium' | 'large';
/**
* Configures the `roundness` of the Chip.
*
* The available options are:
* - none
* - small
* - medium
* - large
* - full
*
* @default `undefined`
*/
rounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
/**
* Configures the `fillMode` of the Chip.
*
* The available options are:
* - solid
* - outline
* - flat
*
* @default `undefined`
*/
fillMode?: 'solid' | 'outline' | 'flat';
/**
* Configures the `themeColor` of the Chip.
*
* The available options are:
* - base
* - info
* - success
* - warning
* - error
*
* @default `undefined`
*/
themeColor?: 'base' | 'info' | 'success' | 'warning' | 'error';
/**
* Triggered on Chip removing.
*/
onRemove?: (event: ChipRemoveEvent) => void;
/**
* Triggered on onClick event.
*/
onClick?: (event: ChipMouseEvent) => void;
/**
* Triggered on onKeyDown event.
*/
onKeydown?: (event: ChipKeyboardEvent) => void;
/**
* Triggered on onFocus event.
*/
onFocus?: (event: ChipFocusEvent) => void;
/**
* Triggered on onBlur event.
*/
onBlur?: (event: ChipFocusEvent) => void;
/**
* Represents the item data, coming from the `ChipList` component.
*/
dataItem?: any;
/**
* Determines if the Chip is selected.
*/
selected?: boolean;
/**
* Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute.
* For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
/**
* @hidden
*/
role?: string;
/**
* @hidden
*/
onMousedown?: (event: any) => void;
}
/**
* Represents the target(element and props) of the ChipRemoveEvent.
*/
export interface ChipHandle {
/**
* The current element or `null` if there is no one.
*/
element: HTMLDivElement | null;
/**
* The props values of the Chip.
*/
props: ChipProps;
}
/**
* @hidden
*/
declare const Chip: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
id: PropType<string>;
text: PropType<string>;
avatar: {
type: PropType<string | Object | Function>;
default: () => any;
};
value: PropType<any>;
dir: {
type: PropType<string>;
default: () => string;
};
removable: {
type: PropType<boolean>;
default: boolean;
};
removeIcon: {
type: PropType<string>;
default: () => string;
};
removeSvgIcon: {
type: PropType<SVGIcon>;
default: () => import('@progress/kendo-svg-icons').SVGIcon;
};
disabled: {
type: PropType<boolean>;
default: boolean;
};
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
selectedIcon: {
type: PropType<string>;
default: () => string;
};
selectedSvgIcon: {
type: PropType<SVGIcon>;
default: () => import('@progress/kendo-svg-icons').SVGIcon;
};
size: PropType<"small" | "medium" | "large">;
rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
fillMode: {
type: PropType<"flat" | "solid" | "outline">;
validator: (value: string) => boolean;
};
themeColor: {
type: PropType<"base" | "info" | "success" | "warning" | "error">;
validator: (value: string) => boolean;
};
dataItem: PropType<any>;
selected: PropType<boolean>;
ariaDescribedBy: PropType<string>;
role: {
type: PropType<string>;
default: string;
};
tabIndex: PropType<number>;
onMousedown: PropType<(event: any) => void>;
}>, {
chipRef: import('vue').Ref<any, any>;
}, {}, {
currentSelected(): any;
chipLabelClass(): {
'k-chip-label': boolean;
};
}, {
computedFocused(): boolean;
handleMouseDown(event: any): void;
handleClick(event: any): void;
handleRemove(event: any): void;
handleKeyDown(event: any): void;
handleFocus(event: FocusEvent): void;
handleBlur(event: FocusEvent): void;
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
click: (event: ChipMouseEvent) => true;
keydown: (event: ChipKeyboardEvent) => true;
blur: (event: ChipFocusEvent) => true;
focus: (event: ChipFocusEvent) => true;
remove: (event: ChipRemoveEvent) => true;
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
id: PropType<string>;
text: PropType<string>;
avatar: {
type: PropType<string | Object | Function>;
default: () => any;
};
value: PropType<any>;
dir: {
type: PropType<string>;
default: () => string;
};
removable: {
type: PropType<boolean>;
default: boolean;
};
removeIcon: {
type: PropType<string>;
default: () => string;
};
removeSvgIcon: {
type: PropType<SVGIcon>;
default: () => import('@progress/kendo-svg-icons').SVGIcon;
};
disabled: {
type: PropType<boolean>;
default: boolean;
};
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
selectedIcon: {
type: PropType<string>;
default: () => string;
};
selectedSvgIcon: {
type: PropType<SVGIcon>;
default: () => import('@progress/kendo-svg-icons').SVGIcon;
};
size: PropType<"small" | "medium" | "large">;
rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
fillMode: {
type: PropType<"flat" | "solid" | "outline">;
validator: (value: string) => boolean;
};
themeColor: {
type: PropType<"base" | "info" | "success" | "warning" | "error">;
validator: (value: string) => boolean;
};
dataItem: PropType<any>;
selected: PropType<boolean>;
ariaDescribedBy: PropType<string>;
role: {
type: PropType<string>;
default: string;
};
tabIndex: PropType<number>;
onMousedown: PropType<(event: any) => void>;
}>> & Readonly<{
onClick?: (event: ChipMouseEvent) => any;
onBlur?: (event: ChipFocusEvent) => any;
onFocus?: (event: ChipFocusEvent) => any;
onKeydown?: (event: ChipKeyboardEvent) => any;
onRemove?: (event: ChipRemoveEvent) => any;
}>, {
dir: string;
role: string;
disabled: boolean;
avatar: string | Object | Function;
removable: boolean;
removeIcon: string;
removeSvgIcon: SVGIcon;
selectedIcon: string;
selectedSvgIcon: SVGIcon;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
export { Chip };