import type { CSSProperties, Component, VNodeChild } from "vue"; import type { XySemanticClassNames, XySemanticStyles } from "../core"; import type { XyIconName } from "../icon"; export type XyBreadcrumbLinkTarget = string | Record; export type XyBreadcrumbSemanticDom = "dropdown" | "icon" | "item" | "label" | "link" | "list" | "menu" | "menuItem" | "root" | "separator"; export interface XyBreadcrumbSemanticProps { hasDropdown: boolean; itemCount: number; separator: string; } export type XyBreadcrumbClassNames = XySemanticClassNames; export type XyBreadcrumbStyles = XySemanticStyles; export interface XyBreadcrumbMenuItem { disabled?: boolean; href?: string; key: string; label: string; onClick?: (event: MouseEvent, item: XyBreadcrumbMenuItem) => void; target?: string; to?: XyBreadcrumbLinkTarget; } export interface XyBreadcrumbItem { className?: string; disabled?: boolean; href?: string; icon?: XyIconName; label: string; menu?: readonly XyBreadcrumbMenuItem[]; onClick?: (event: MouseEvent, item: XyBreadcrumbItem) => void; separator?: string; style?: CSSProperties; target?: string; to?: XyBreadcrumbLinkTarget; } export type XyBreadcrumbLinkComponent = string | Component; export interface XyBreadcrumbProps { classNames?: XyBreadcrumbClassNames; dropdownIcon?: XyIconName; items?: readonly XyBreadcrumbItem[]; label?: string; linkComponent?: XyBreadcrumbLinkComponent; separator?: string; styles?: XyBreadcrumbStyles; } export interface XyBreadcrumbItemSlotProps { current: boolean; index: number; item: XyBreadcrumbItem; } export interface XyBreadcrumbSeparatorSlotProps extends XyBreadcrumbItemSlotProps { separator: string; } export interface XyBreadcrumbSlots { item?: (props: XyBreadcrumbItemSlotProps) => VNodeChild; separator?: (props: XyBreadcrumbSeparatorSlotProps) => VNodeChild; }