@progress/kendo-vue-buttons/SegmentedControl/interfaces/SegmentedControlTypes.d.ts

TODO

/**
 * @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 { ButtonProps } from '../../Button';
/**
 * Represents the properties of a single item within the SegmentedControl component.
 */
export interface SegmentedItemProps {
    /**
     * The unique identifier for the SegmentedItem. Used to match against the SegmentedControl's `value` to determine selection.
     *
     * @example
     * ```vue
     * <SegmentedControl :items="[{ value: 'option1', text: 'Option 1' }]" />
     * ```
     */
    value: string;
    /**
     * Sets an SVG icon to render inside the item using an `Icon` element.
     * Only rendered when `itemTemplate` is not provided.
     *
     * @example
     * ```vue
     * <SegmentedControl :items="[{ value: 'opt1', text: 'Bold', svgIcon: boldIcon }]" />
     * ```
     */
    svgIcon?: SVGIcon;
    /**
     * Specifies the text label of the SegmentedItem.
     * Rendered inside a `<span>` element. Only rendered when `itemTemplate` is not provided.
     *
     * @example
     * ```vue
     * <SegmentedControl :items="[{ value: 'opt1', text: 'Option 1' }]" />
     * ```
     */
    text?: string;
    /**
     * CSS class name applied to the icon element only when the item is selected.
     * Has no effect when `itemTemplate` is provided.
     *
     * @example
     * ```vue
     * <SegmentedControl :items="[{ value: 'opt1', text: 'Bold', svgIcon: boldIcon, iconClassName: 'active-icon' }]" />
     * ```
     */
    iconClassName?: string;
    /**
     * Sets the `title` HTML attribute of the item button.
     *
     * @example
     * ```vue
     * <SegmentedControl :items="[{ value: 'opt1', title: 'Option 1 tooltip' }]" />
     * ```
     */
    title?: string;
    /**
     * Represents the `dir` HTML attribute of the item button, controlling text directionality.
     */
    dir?: string;
    /**
     * Specifies whether the item is disabled.
     */
    disabled?: boolean;
    /**
     * Specifies the `type` HTML attribute of the item button.
     *
     * @default "button"
     */
    type?: 'button' | 'submit' | 'reset';
    /**
     * The `aria-label` HTML attribute of the item button.
     */
    'aria-label'?: string;
    /**
     * Event handler fired when the item button is clicked.
     */
    onClick?: (e: MouseEvent) => void;
    /**
     * Event handler fired when the mouse pointer enters the item button.
     */
    onMouseEnter?: (e: MouseEvent) => void;
    /**
     * Event handler fired when the mouse pointer leaves the item button.
     */
    onMouseLeave?: (e: MouseEvent) => void;
    /**
     * Event handler fired when the item button receives focus.
     */
    onFocus?: (e: FocusEvent) => void;
    /**
     * Event handler fired when the item button loses focus.
     */
    onBlur?: (e: FocusEvent) => void;
}
/**
 * Represents the properties of the SegmentedControl component.
 *
 * The SegmentedControl displays a horizontal set of mutually exclusive button segments,
 * allowing the user to select one option at a time.
 */
export interface SegmentedControlProps {
    /**
     * Specifies the collection of items rendered as buttons inside the SegmentedControl.
     *
     * @example
     * ```vue
     * <SegmentedControl :items="[{ value: 'opt1', text: 'Option 1' }, { value: 'opt2', text: 'Option 2' }]" />
     * ```
     */
    items?: Array<SegmentedItemProps>;
    /**
     * Sets the size of the SegmentedControl items. The value is mapped through `kendoThemeMaps.sizeMap`
     * to the corresponding CSS size class.
     *
     * The available options are:
    * - `xs`
     * - `small`
     * - `medium`
     * - `large`
     * - `null` — Does not set a size className.
     *
     * @example
     * ```vue
     * <SegmentedControl :size="'large'" :items="items" />
     * ```
     */
    size?: ButtonProps['size'];
    /**
     * Specifies the layout mode of the SegmentedControl.
     *
     * - `compact`: Items are sized based on their content (default).
     * - `stretch`: Items stretch to fill the available horizontal space, applying the `k-segmented-control-stretched` CSS class.
     *
     * @default "compact"
     *
     * @example
     * ```vue
     * <SegmentedControl :layout-mode="'stretch'" :items="items" />
     * ```
     */
    layoutMode?: 'compact' | 'stretch';
    /**
     * The currently selected item value.
     * When provided, the component operates in controlled mode and the `change` event must be used to update this value.
     * The item whose `value` matches this prop receives the `k-selected` CSS class.
     *
     * @example
     * ```vue
     * <SegmentedControl :value="selectedValue" @change="(val) => selectedValue = val" :items="items" />
     * ```
     */
    value?: string;
    /**
     * Sets the initially selected item value when the component is in uncontrolled mode (i.e., `value` is not provided).
     * Once set, subsequent changes to `defaultValue` are ignored.
     *
     * @example
     * ```vue
     * <SegmentedControl :default-value="'option2'" :items="items" />
     * ```
     */
    defaultValue?: string;
    /**
     * A custom template for the item content. When provided, it replaces the default rendering
     * (SVG icon + text span) entirely.
     *
     * Accepts a string (slot name) or a render function. The slot receives `{ props: { item } }`
     * where `item` is the full item configuration object.
     *
     * @example
     * ```vue
     * <SegmentedControl :items="items" :item-template="'myTemplate'">
     *     <template #myTemplate="{ props }">
     *         <span>{{ props.item.text }}</span>
     *     </template>
     * </SegmentedControl>
     * ```
     */
    itemTemplate?: string | ((itemData: SegmentedItemProps) => any);
}
/**
 * Represents the internal interaction state of the SegmentedControl component.
 *
 * @hidden
 */
export interface SegmentedControlState {
    /**
     * The `value` of the currently selected item in uncontrolled mode.
     */
    selectedValue?: string;
    /**
     * The `value` of the item currently being hovered over.
     */
    hoveredValue?: string;
    /**
     * The `value` of the item that currently has keyboard focus.
     */
    focusedValue?: string;
}