@oruga-ui/oruga-next

import type { ComponentClass, DynamicComponent, Numberish } from "@/types"; import type { OptionsOrGroupsProp } from "@/composables"; type ValueType<T, IsMultiple> = IsMultiple extends true ? T[] : T; export type DropdownOptions<T> = OptionsOrGroupsProp<DropdownItemProps<T>>; export type DropdownProps<T, IsMultiple extends boolean = false> = { /** Override existing theme classes completely */ override?: boolean; /** The selected option value, use v-model to make it two-way binding */ modelValue?: ValueType<T, IsMultiple>; /** Allows multiple selections - converts the `modelValue` into an array */ multiple?: IsMultiple; /** Dropdown options, unnecessary when default slot is used */ options?: DropdownOptions<T>; /** The active state of the dropdown, use v-model:active to make it two-way binding */ active?: boolean; /** Trigger label, unnecessary when trigger slot is used */ label?: string; /** Interaction is disabled */ disabled?: boolean; /** * Menu content (items) are shown inline, trigger is removed * @deprecated since 0.13.0, use the `OListbox` component instead */ inline?: boolean; /** Enables item selection */ selectable?: boolean; /** Menu content will be scrollable */ scrollable?: boolean; /** Max height of dropdown content */ maxHeight?: Numberish; /** Height of the listbox, a scrollbar is defined if height of list exceeds this value */ // scrollHeight?: string; /** * Position of the dropdown relative to the trigger * @values auto, top, bottom, left, right, top-right, top-left, bottom-left, bottom-right */ position?: | "auto" | "top" | "bottom" | "left" | "right" | "top-right" | "top-left" | "bottom-left" | "bottom-right"; /** Custom animation (transition name) */ animation?: string; /** Dropdown will be expanded (full-width) */ expanded?: boolean; /** HTML element Id of the dropdown menu element */ menuId?: string; /** Dropdown menu tag name */ menuTag?: DynamicComponent; /** Dropdown item tag name */ itemTag?: DynamicComponent; /** Dropdown trigger tag name */ triggerTag?: DynamicComponent; /** Show when hover over the trigger */ openOnHover?: boolean; /** Show when trigger get focused */ openOnFocus?: boolean; /** Show when clicked on the trigger */ openOnClick?: boolean; /** Show when right clicked on the trigger */ openOnContextmenu?: boolean; /** Dropdown delay before it appears (number in ms) */ delay?: number; /** Keep dropdown list open when item get selected */ keepOpen?: boolean; /** The first option will always be pre-selected (easier to just hit enter or tab) */ keepFirst?: boolean; /** Close Dropdown when clicked outside */ closeOnOutside?: boolean; /** Close Dropdown when page get scrolled */ closeOnScroll?: boolean; /** Select current focused item when focused */ selectOnFocus?: boolean; /** Select current focused item when closed */ selectOnClose?: boolean; /** Dropdown content (items) are shown into a modal on mobile */ mobileModal?: boolean; /** Dropdown content (items) are shown into a modal on desktop */ desktopModal?: boolean; /** Mobile breakpoint as `max-width` value */ mobileBreakpoint?: string; /** * Append the component to another part of the DOM. * Set `true` to append the component to the body. * In addition, any CSS selector string or an actual DOM node can be used. */ teleport?: boolean | string | object; /** * Set `true` to remove the body scrollbar. * When `false`, a non-scrollable scrollbar will be kept to avoid moving the background, * but will set the body to a fixed position, which may break some layouts. */ clipScroll?: boolean; /** Ensures that each input has an accessible name. */ labelledby?: string; /** Accessibility aria-label to be passed to the trigger element - usefull if selectable */ ariaLabel?: string; } & DropdownClasses; // class props (will not be displayed in the docs) export type DropdownClasses = Partial<{ /** Class of the root element */ rootClass: ComponentClass; /** Class of the root element when on mobile */ mobileClass: ComponentClass; /** Class of the root element when shown as modal */ modalClass: ComponentClass; /** Class of the root element when teleported */ teleportClass: ComponentClass; /** * Class of the root element when inlined * @deprecated since 0.13.0, use the `OListbox` component instead */ inlineClass: ComponentClass; /** Class of the root element when disabled */ disabledClass: ComponentClass; /** Class of the root element when expanded */ expandedClass: ComponentClass; /** Class for the root element with position */ positionClass: ComponentClass; /** Class for the root element when active or inline */ activeClass: ComponentClass; /** Class for the root element when trigger is hoverable */ hoverableClass: ComponentClass; /** Class of the trigger element */ triggerClass: ComponentClass; /** Class of the menu element */ menuClass: ComponentClass; /** Class of the menu element with position */ menuPositionClass: ComponentClass; /** Class of the menu element when active or inline */ menuActiveClass: ComponentClass; /** Class of the overlay when is shown as modal */ overlayClass: ComponentClass; /** Class of the body when dropdown is open and scroll is clipped */ scrollClipClass: ComponentClass; /** Class of the body when dropdown is open and scroll is keeped */ scrollKeepClass: ComponentClass; }>; export type DropdownItemProps<T> = { /** Override existing theme classes completely */ override?: boolean; /** * Item value (it will be used as the v-model of the wrapper component) - default is an uuid * @type string|number|object */ value?: T; /** Item label, unnecessary when default slot is used */ label?: string; /** Item is disabled */ disabled?: boolean; /** Item is clickable and emit an event */ clickable?: boolean; /** Define whether the item is visible or not */ hidden?: boolean; /** Dropdown item tag name */ tag?: DynamicComponent; } & DropdownItemClasses; // class props (will not be displayed in the docs) export type DropdownItemClasses = Partial<{ /** Class of the item element. */ itemClass: ComponentClass; /** Class of the item element when selected */ itemSelectedClass: ComponentClass; /** Class of the item element when focused */ itemFocusedClass: ComponentClass; /** Class of the item element when clickable */ itemClickableClass: ComponentClass; /** Class of the item element when disabled */ itemDisabledClass: ComponentClass; }>;