Aqua DS - Component Library

Quick Start

Framework Implementation

WebComponents

Vue 3

React

Angular

Components

Data Types

Directives

Style Customization

Theming

Custom Styles

Icons

FAQ

Aqua Basis

Aqua Composition

Aqua Interfaces

Aqua Interfaces provide strong typing for reusable patterns such as banners, visual states, icons, and contextual data. By abstracting common structures, they enable consistency, reduce duplication, and make integration between components seamless and predictable.

IBanner

Define the structure and behavior of banner-like messages across components.

It provides a standardized way to display alerts, confirmations, and contextual information in the UI, while offering control over visibility, severity, and content.

This interface can be used in any component that needs to render inline or floating banners—such as forms, dialogs, or validation wrappers.

{
  hasCloseIcon: boolean;
  state: 'info' | 'success' | 'warning' | 'danger';
  titleBanner: string;
  content: string;
  value: boolean;
}
Key Description Example
hasCloseIcon Boolean value that determines if the banner includes a close icon for dismissing. true
state Defines the type or severity of the banner. Accepts 'info', 'success', 'warning', or 'danger'. 'warning'
titleBanner Main title displayed in the banner. Helps communicate the context or purpose. "Heads up!"
content Supporting text providing further detail or instructions. "Please select a valid range."
value Controls the visibility or active state of the banner. false

IVirtualScrollConfig

It provides a performant way to render large datasets by only mounting visible DOM elements, improving both performance and memory usage.

This type is used transversally in components like tables, lists, dropdowns, and calendars where dynamic rendering and high scroll performance are essential.

{
  height: number;
  rowCount: number;
  initialIndex: number;
  initialScrollTop: number;
  renderRow: () => Element;
  estimatedRowHeight: number;
  overscanCount?: number;
  initialScrollIndex?: number;
  rowHeight?: Array<string>;
  onMount?: () => void;
  onScroll?: () => void;
  onRowsRendered?: () => void;
}
Key Description Example
height Total height (in pixels) of the scrollable container. 400
rowCount Total number of items in the virtual list. 1000
initialIndex Index to scroll to on mount. 0
initialScrollTop Vertical scroll position in pixels at initial render. 0
renderRow Function that renders a given row. Returns a DOM element or virtual node. () => document.createElement('div')
estimatedRowHeight Average height of each row used for virtualization calculations. 40
overscanCount? Optional. Number of rows to render before and after the visible area. 5
initialScrollIndex? Optional. Alternative to initialIndex; sets initial visible index. 10
rowHeight? Optional. Array of strings representing custom row heights. ['40px', '50px']
onMount? Optional. Callback executed after initial mount. () => console.log('mounted')
onScroll? Optional. Callback triggered on scroll events. () => handleScroll()
onRowsRendered? Optional. Callback fired when rows are rendered into view. () => updatePagination()

IConfigDropdown

It enables dynamic rendering and flexible control of dropdown behavior, such as defining the trigger element, width, and callback on selection.

This interface is used transversally by components like aq-dropdown, aq-select, and any other element requiring floating interactive menus.

Key Description Example
activatorElement The HTML element that triggers the dropdown. Required to position the popover. document.getElementById('btn')
popoverWidth? Optional. Defines the width of the dropdown. Based on the POPOVER_WIDTHS enum. 'sm'
itemSelected? Optional. Callback executed when a dropdown item is selected. () => console.log('Selected')

ICustomPopoverConfig

It is especially useful when developers need fine-grained control over when and how popovers are shown or hidden, beyond default behavior.

This configuration type is used to extend the behaivour of the components such as dropdowns, tooltips, and menus.

Key Description Example
customMount? Optional. Function that receives the popover instance and is called when the element mounts. (instance) => console.log(instance)
hideOnClickOutside? Optional. Whether the popover should close when clicking outside its bounds. true
hideOnClick? Optional. Whether the popover should close when clicking inside the content. false

IPopover

Combines the configuration and lifecycle support for any component that implements a floating UI element using tippy.js as the underlying engine.

All fields are optional thanks to Partial<>, giving you full flexibility over what to define or override.

import { LifecycleHooks, Props } from 'tippy.js';
import { ICustomPopoverConfig } from './ICustomPopoverConfig';

export interface IPopover extends Partial<Props & ICustomPopoverConfig & LifecycleHooks> {}

| --- | --- | --- |

IDropdownItem

Each dropdown item option can include text, an optional icon, styling classes, and a callback function to execute when selected.

{
  text: string;
  icon?: string;
  class?: string;
  classIcon?: string;
  callback?: () => void;
}

| --- | --- | --- | --- |