primevue/inputcolor/index.d.ts

PrimeVue is a premium UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, wh

/**
 *
 * InputColor is a compound, headless color picker. Compose the parts (`InputColorArea`, `InputColorSlider`,
 * `InputColorSwatch`, `InputColorEyeDropper`, `InputColorInput`, …) to build the desired layout. The root
 * holds the parsed color value and exposes channel-aware update methods to its children via provide/inject.
 *
 * [Live Demo](https://www.primevue.dev/inputcolor/)
 *
 * @module inputcolor
 *
 */
import type { DefineComponent, DesignToken, EmitFn, HintedString, Nullable, PassThrough } from '@primevue/core';
import type { ComponentHooks } from '@primevue/core/basecomponent';
import type { PassThroughOptions } from 'primevue/passthrough';
import type { VNode } from 'vue';

/**
 * Custom passthrough(pt) option type, used to forward attributes via {@link InputColorPassThroughOptions}.
 */
export declare type InputColorPassThroughOptionType = InputColorPassThroughAttributes | ((options: InputColorPassThroughMethodOptions) => InputColorPassThroughAttributes | string) | string | null | undefined;

/**
 * Custom passthrough(pt) option method.
 */
export interface InputColorPassThroughMethodOptions {
    /**
     * Defines instance.
     */
    instance: any;
    /**
     * Defines valid properties.
     */
    props: InputColorProps;
    /**
     * Defines current inline state.
     */
    state: InputColorState;
    /**
     * 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 InputColorProps.pt}
 */
export interface InputColorPassThroughOptions {
    /**
     * Used to pass attributes to the root's DOM element.
     */
    root?: InputColorPassThroughOptionType;
    /**
     * Used to manage all lifecycle hooks.
     * @see {@link BaseComponent.ComponentHooks}
     */
    hooks?: ComponentHooks;
}

/**
 * Custom passthrough attributes for each DOM elements.
 */
export interface InputColorPassThroughAttributes {
    [key: string]: any;
}

/**
 * Color space output formats supported by {@link InputColorProps.format}.
 */
export type InputColorFormat = HintedString<'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsb' | 'hsba' | 'oklch' | 'oklcha' | 'css'>;

/**
 * Defines current inline state in InputColor component.
 */
export interface InputColorState {
    /**
     * Internal raw color string, kept in sync with `modelValue` and the form field.
     */
    d_value: Nullable<string>;
    /**
     * Whether the user is currently dragging on the saturation/brightness area.
     */
    isAreaDragging: boolean;
}

/**
 * Defines valid properties in InputColor component.
 */
export interface InputColorProps {
    /**
     * Value of the component, paired with `v-model`. Format follows {@link InputColorProps.format}.
     */
    modelValue?: Nullable<string>;
    /**
     * The default value for the component. Used in uncontrolled mode and as the initial value when integrated with PrimeVue Forms.
     */
    defaultValue?: Nullable<string>;
    /**
     * The name attribute for the component, used to identify it within a form.
     */
    name?: string | undefined;
    /**
     * Output format for `update:modelValue` and channel inputs reading the `css` channel.
     * @defaultValue 'hsba'
     */
    format?: InputColorFormat;
    /**
     * When present, disables the component and all child interactions.
     * @defaultValue false
     */
    disabled?: boolean;
    /**
     * When present, it specifies that the component should have invalid state style.
     * @defaultValue false
     */
    invalid?: boolean | undefined;
    /**
     * Form control object, typically provided by parent form context.
     */
    formControl?: Record<string, any> | undefined;
    /**
     * It generates scoped CSS variables using design tokens for the component.
     */
    dt?: DesignToken<any>;
    /**
     * Used to pass attributes to DOM elements inside the component.
     */
    pt?: PassThrough<InputColorPassThroughOptions>;
    /**
     * Used to configure passthrough(pt) options of the component.
     */
    ptOptions?: PassThroughOptions;
    /**
     * When enabled, it removes component related styles in the core.
     * @defaultValue false
     */
    unstyled?: boolean;
}

/**
 * Defines valid slots in InputColor component.
 *
 * `InputColor` is a renderless root: it does not render a DOM element, only its children
 * (mirrors React's `InputColor.Root` behavior). State is shared via provide/inject through
 * `$pcInputColor`, so wrap your composition tree with `<InputColor>` and place the parts
 * (`InputColorArea`, `InputColorSlider`, …) inside.
 */
export interface InputColorSlots {
    /**
     * Default slot, place `InputColorArea`, `InputColorSlider`, `InputColorSwatch`, `InputColorInput`, … inside.
     */
    default(): VNode[];
}

/**
 * Parsed color instance emitted by InputColor value change events.
 */
export interface ColorInstance {
    /**
     * Returns the color serialized to the given format.
     */
    toString(format?: string): string;
    /**
     * Returns a converted color instance.
     */
    toFormat(format: string): ColorInstance;
    /**
     * Returns the channel value for the given channel name.
     */
    getChannelValue(channel: string): number | string;
    /**
     * Returns a new color with the given channel value.
     */
    withChannelValue(channel: string, value: number | string): ColorInstance;
}

/**
 * Custom value change event.
 */
export interface InputColorValueChangeEvent {
    /**
     * Browser native event.
     */
    originalEvent?: Event;
    /**
     * Value serialized to {@link InputColorProps.format}.
     */
    value: string;
    /**
     * Parsed color instance.
     */
    color: ColorInstance;
}

/**
 * Defines valid emits in InputColor component.
 */
export interface InputColorEmitsOptions {
    /**
     * Emitted when the color value changes. Payload is the color serialized to {@link InputColorProps.format}.
     */
    'update:modelValue'(value: string): void;
    /**
     * Emitted whenever the value changes (controlled or uncontrolled). Payload is the serialized color string.
     */
    'value-change'(value: string): void;
    /**
     * Emitted when a pointer or keyboard interaction finishes.
     */
    'value-change-end'(event: InputColorValueChangeEvent): void;
}

/**
 * Type alias for emits resolved from {@link InputColorEmitsOptions}.
 */
export declare type InputColorEmits = EmitFn<InputColorEmitsOptions>;

/**
 * **PrimeVue - InputColor**
 *
 * _InputColor is a compound, headless color picker._
 *
 * [Live Demo](https://www.primevue.dev/inputcolor/)
 * --- ---
 * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
 *
 * @group Component
 *
 */
declare const InputColor: DefineComponent<InputColorProps, InputColorSlots, InputColorEmits>;

declare module 'vue' {
    export interface GlobalComponents {
        InputColor: DefineComponent<InputColorProps, InputColorSlots, InputColorEmits>;
    }
}

export default InputColor;