/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { FormComponentProps, SVGIcon } from '@progress/kendo-vue-common'; import { RatingKeyboardEvent, RatingItemMouseEvent, RatingChangeEvent } from './RatingEvents'; /** * Represents the properties of [Rating](% slug overview_rating %) component. */ export interface RatingProps extends FormComponentProps { /** * Sets the `id` property of the top div element of the Rating. */ id?: string; /** * Sets additional classes to the Rating. */ className?: string; /** * Sets the `tabIndex` attribute. */ tabIndex?: number; /** * Sets additional CSS styles to the Rating. */ style?: any; /** * Represents the rendered Rating item. */ item?: any; /** * Sets the current value of the Rating, used in controlled mode. [See example]({% slug item_customization_ratingitem %}) */ value?: number; /** * Sets the default value of the Rating, used in uncontrolled mode. [See example]({% slug controlled_rating %}) */ defaultValue?: number; /** * Sets the min possible icon value or star value in the main use-case. */ min?: number; /** * Sets the max possible icon value or star value in the main use-case. */ max?: number; /** * Sets the step value between the min and max value. */ step?: number; /** * Determines the Rating direction `ltr` - by default, or `rtl`. */ dir?: string; /** * Determines if the Rating has a label and is it a custom one. */ label?: string; /** * Sets the `readonly` mode of the Rating, if it is set to `true`. [See example]({% slug label_rating %}) */ readonly?: boolean; /** * Sets the `disabled` mode of the Rating, if it is set to `true`. [See example]({% slug readonly_rating %}) */ disabled?: boolean; /** * Sets custom Rating icon, by default - star. [See example]({% slug disabled_rating %}) */ icon?: string; /** * Sets custom Rating SVG icon. */ svgIcon?: SVGIcon; /** * Sets custom Rating SVG icon. */ svgIconOutline?: SVGIcon; /** * Determines the selection mode. By default set to `continues`. [See example]({% slug icon_rating %}) */ selection?: 'continues' | 'single'; /** * Determines the precision of the Rating. By default set to `item`. [See example]({% slug selection_rating %}) */ precision?: 'half' | 'item'; /** * Determines if value represents half icon -> true, or not -> false. [See example]({% slug precision_rating %}) */ half?: boolean; /** * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute). * For example these elements could contain error or hint message. */ ariaDescribedBy?: string; /** * Identifies the element(s) which will label the component. */ ariaLabelledBy?: string; /** * Triggered after value change. Gets outside access to the target element, the new value and the event type. */ onChange?: (event: RatingChangeEvent) => void; /** * Triggered after `onClick` event. Gets outside access to the target element, the new value and the event type. */ onClick?: (event: RatingItemMouseEvent) => void; /** * Triggered after `onKeyDown` event. Gets outside access to the target element, the new value and the event type. */ onKeyDown?: (event: RatingKeyboardEvent) => void; /** * Triggered after `onFocus` event. Gets outside access to the target element and the event type. */ onFocus?: (event: FocusEvent) => void; /** * Triggered after `onBlur` event. Gets outside access to the target element and the event type. */ onBlur?: (event: FocusEvent) => void; }