/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { Component, VNode } from 'vue'; import { BreadcrumbOrderedListProps } from './BreadcrumbOrderedListProps'; import { BreadcrumbLinkProps } from './BreadcrumbLinkProps'; import { BreadcrumbListItemProps } from './BreadcrumbListItemProps'; import { BreadcrumbDelimiterProps } from './BreadcrumbDelimiterProps'; /** * Represents the BreadcrumbDataModel object type. */ export interface BreadcrumbDataModel { /** * Represents the `id` of the dataItems object. * Used for setting the `key` of the BreadcrumbListItem component and the `id` of the BreadcrumbLink component. */ id?: string; /** * Represents the `text` used inside the BreadcrumbLink component. */ text?: string; /** * Represents the `svgIcon` used inside the BreadcrumbLink component. */ svgIcon?: VNode; /** * Represents the `icon` used inside the BreadcrumbLink component. */ icon?: VNode; /** * @hidden */ disabled?: boolean; } /** * Represents the `BreadcrumbLinkMouseEvent`. */ export interface BreadcrumbLinkMouseEvent { /** * Represents the `id` of the `BreadcrumbLinkMouseEvent`. */ id?: string; /** * A Vue native DOM event. */ nativeEvent: any; } export interface BreadcrumbProps { /** * Sets the `id` property of the top `div` element of the Breadcrumb. */ id?: string; /** * Represents the Breadcrumb ordered list component. */ breadcrumbOrderedList?: Component; /** * Represents the Breadcrumb list item component. */ breadcrumbListItem?: Component; /** * Represents the Breadcrumb delimiter component. */ breadcrumbDelimiter?: Component; /** * Represents the Breadcrumb link component. */ breadcrumbLink?: Component; /** * Represents the dataItems of the Breadcrumb from type BreadcrumbDataModel. */ dataItems: BreadcrumbDataModel[]; /** * Specifies the padding of all Breadcrumb elements. * * The possible values are: * * `small` * * `medium` * * `large` * * @default `undefined` */ size?: 'small' | 'medium' | 'large'; /** * The Breadcrumb direction `ltr` or `rtl`. */ dir?: 'ltr' | 'rtl'; /** * Sets the `tabIndex` attribute to the Breadcrumb. */ tabIndex?: number; /** * Sets the Collapse mode of the Breadcrumb. * The available values are: * - `auto`(default)—Items are automatically collapsed based on the width of the Breadcrumb. First and last item always remain visible. * - `wrap`—Items are wrapped on multiple rows when their total width is bigger than the width of the BreadCrumb. * - `none`—All items are expanded on the same row. This scenario is useful when the Breadcrumb needs to be scrolled. * * For more information and example refer to the [Collapse Modes]({% slug collapse_modes_breadcrumb %}) article. */ collapseMode?: 'auto' | 'wrap' | 'none'; /** * Determines the `disabled` mode of the Breadcrumb. If `true`, the component is disabled. */ disabled?: boolean; /** * Represents the `value` field. Used for setting the key of the BreadcrumbListItem component and the `id` of the BreadcrumbLink component. */ valueField?: string; /** * Represents the `text` field. Used for setting the `text` inside the BreadcrumbLink component. */ textField?: string; /** * Represents the `svgIcon` field. Used for setting the `svgIcon` inside the BreadcrumbLink component. */ svgIconField?: string; /** * Represents the `icon` field. Used for setting the `icon` inside the BreadcrumbLink component. */ iconField?: string; /** * Represents the `onSelect` event. Triggered after click on the Breadcrumb. */ onSelect?: (event: BreadcrumbLinkMouseEvent) => void; /** * Triggered on onKeydown event. */ onKeydown?: (event: any) => void; /** * Represents the label of the Breadcrumb component. */ ariaLabel?: string; }