/** * * Rating component is a star based selection input. * * [Live Demo](https://www.primevue.dev/rating/) * * @module rating * */ import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core'; import type { ComponentHooks } from '@primevue/core/basecomponent'; import type { PassThroughOptions } from 'primevue/passthrough'; import { VNode } from 'vue'; export declare type RatingPassThroughOptionType = RatingPassThroughAttributes | ((options: RatingPassThroughMethodOptions) => RatingPassThroughAttributes | string) | string | null | undefined; /** * Custom passthrough(pt) option method. */ export interface RatingPassThroughMethodOptions { /** * Defines instance. */ instance: any; /** * Defines valid properties. */ props: RatingProps; /** * Defines current inline state. */ state: RatingState; /** * Defines current options. */ context: RatingContext; /** * Defines valid attributes. */ attrs: any; /** * Defines parent options. */ parent: any; /** * Defines passthrough(pt) options in global config. */ global: object | undefined; } /** * Custom passthrough(pt) options. * @see {@link RatingProps.pt} */ export interface RatingPassThroughOptions { /** * Used to pass attributes to the root's DOM element. */ root?: RatingPassThroughOptionType; /** * Used to pass attributes to the option's DOM element. */ option?: RatingPassThroughOptionType; /** * Used to pass attributes to the on icon's DOM element. */ onIcon?: RatingPassThroughOptionType; /** * Used to pass attributes to the off icon's DOM element. */ offIcon?: RatingPassThroughOptionType; /** * Used to pass attributes to the half-value hidden radio input element (only rendered when `allowHalf` is true). */ halfInput?: RatingPassThroughOptionType; /** * Used to pass attributes to the full-value hidden radio input element. */ fullInput?: RatingPassThroughOptionType; /** * Used to manage all lifecycle hooks. * @see {@link BaseComponent.ComponentHooks} */ hooks?: ComponentHooks; } /** * Custom passthrough attributes for each DOM elements */ export interface RatingPassThroughAttributes { [key: string]: any; } /** * Defines current inline state in Rating component. */ export interface RatingState { /** * Whether the rating is currently being hovered/previewed. */ hovering: boolean; /** * The previewed value during hover or focus, used for visual feedback before commit. */ hoveringValue: number; } /** * Defines current options in Rating component. */ export interface RatingContext { /** * Whether the option is fully highlighted (filled). * @defaultValue false */ highlighted: boolean; /** * Whether the option is half-highlighted (only relevant when `allowHalf` is true). * @defaultValue false */ half: boolean; /** * Whether the option's value matches the committed model value. * @defaultValue false */ checked: boolean; } /** * Custom change event. * @see {@link RatingEmitsOptions.change} */ export interface RatingChangeEvent { /** * Browser event */ originalEvent: Event; /** * Selected option value */ value: number | null; } /** * Defines valid properties in Rating component. */ export interface RatingProps { /** * Value of the rating. */ modelValue?: number | null | undefined; /** * The default value for the input when not controlled by `modelValue`. */ defaultValue?: number | null | undefined; /** * Name of the element. */ name?: string | undefined; /** * When present, it specifies that the element should be disabled. * @defaultValue false */ disabled?: boolean | undefined; /** * When present, it specifies that component is read-only. * @defaultValue false */ readonly?: boolean | undefined; /** * Number of stars. * @defaultValue 5 */ stars?: number | undefined; /** * When enabled, allows half-value selection (e.g. 1.5, 2.5). Each star renders an additional sr-only radio input for the half value. * @defaultValue false */ allowHalf?: boolean | undefined; /** * Layout orientation of the stars. * @defaultValue 'horizontal' */ orientation?: 'horizontal' | 'vertical' | undefined; /** * Icon for the on state. */ onIcon?: string | undefined; /** * Icon for the off state. */ offIcon?: string | undefined; /** * Form control object, typically used for handling validation and form state. */ formControl?: Record | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ dt?: DesignToken; /** * Used to pass attributes to DOM elements inside the component. * @type {RatingPassThroughOptions} */ pt?: PassThrough; /** * Used to configure passthrough(pt) options of the component. * @type {PassThroughOptions} */ ptOptions?: PassThroughOptions; /** * When enabled, it removes component related styles in the core. * @defaultValue false */ unstyled?: boolean; } /** * Defines valid slots in Rating component. */ export interface RatingSlots { /** * Custom on icon template. * @param {Object} scope - on icon slot's params. */ onicon(scope: { /** * Star value (1..stars). */ value: number; }): VNode[]; /** * Custom off icon template. * @param {Object} scope - off icon slot's params. */ officon(scope: { /** * Star value (1..stars). */ value: number; }): VNode[]; } /** * Defines valid emits in Rating component. */ export interface RatingEmitsOptions { /** * Emitted when the value changes. * @param {number | null} value - New value. */ 'update:modelValue'(value: number | null): void; /** * Emitted when the value changes in uncontrolled mode (payload is the new primitive value). * @param {number | null} value - New value. */ 'value-change'(value: number | null): void; /** * Callback invoked when the value changes. Mirrors PrimeReact's `onValueChange` payload shape. * @param {RatingChangeEvent} event - Custom change event with the original event and the new value. */ change(event: RatingChangeEvent): void; /** * Callback to invoke when an inner radio input receives focus. * @param {Event} event - Browser event. */ focus(event: Event): void; /** * Callback to invoke when focus leaves the component. * @param {Event} event - Browser event. */ blur(event: Event): void; } export declare type RatingEmits = EmitFn; /** * **PrimeVue - Rating** * * _Rating component is a star based selection input._ * * [Live Demo](https://www.primevue.dev/rating/) * --- --- * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) * * @group Component * */ declare const Rating: DefineComponent; declare module 'vue' { export interface GlobalComponents { Rating: DefineComponent; } } export default Rating;