Reference

See below the exhaustive list of the User Interface (UI) Elements currently supported by the Abstract Design System (ADS). 

All Design System (DS) implementations are expected to comply exhaustively with that definition.

Alert

/**
 * @since 18.0.0RC1
 * @beta
 */
type AlterAction = { name: string; callback: () => void };

/**
 * @since 18.0.0RC1
 * @beta
 */
type AlertActions = AlterAction[];

/**
 * Props for the alert component.
 *
 * @since 18.0.0RC1
 * @beta
 */
type AlertProps = {
  title?: string;
  type: "success" | "warning" | "error" | "info";
  description?: string;
  actions?: AlertActions;
  closable?: boolean;
  /**
   * Other (less important) data to show in the alert.
   * @since 18.0.0RC1
   * @beta
   */
  details?: string;
  /**
   * Render with flat corners to use as, e.g., a banner.
   * @since 18.0.0RC1
   * @beta
   */
  flatCorners?: boolean;
};

Avatar

/**
 * Props for the avatar component.
 *
 * @since 18.0.0RC1
 * @beta
 */
type AvatarProps = {
  /**
   * Image URL.
   */
  image?: string;
  /**
   * Image maximum dimension, with a unit (e.g., 30 px)
   */
  size?: string;
  /**
   * User name.
   */
  name?: string;
};

Breadcrumb

/**
 * @since 18.0.0RC1
 * @beta
 */
type BreadcrumbItem = { label: string; url?: string };

/**
 * @since 18.0.0RC1
 * @beta
 */
type BreadcrumbItems = BreadcrumbItem[];

/**
 * Shared types for the x-breadcrumb component implementations.
 * @since 18.0.0RC1
 * @beta
 */
type BreadcrumbProps = {
  items: BreadcrumbItems;
};

Button (Btn)

/**
 * Props for the btn component.
 *
 * @since 18.0.0RC1
 * @beta
 */
type BtnProps = {
  disabled? boolean;
  variant?:
    | "default"
    | "primary"
    | "success"
    | "neutral"
    | "warning"
    | "danger"
    | "text";
  size?: "small";
  pill?: boolean;
};

Card

/**
 * @since 18.0.0RC1
 * @beta
 */
type CardProps = {
  title?: string;
};

Checkbox

/**
 * @since 18.0.0RC1
 * @beta
 */
type CheckboxProps = {
  label: string;
  help?: string;
  modelValue?: boolean;
};

Dialog

/**
 * @since 18.0.0RC1
 * @beta
 */
type DialogProps = {
  width?: "auto";
  modelValue?: boolean;
  logo?: string;
};

/**
 * @since 18.2.0RC1
 * @beta
 */
type DropdownProps = {
    btnProps?: BtnProps;
    disabled?: boolean;
}

FileInput

/**
 * @since 18.0.0RC1
 * @beta
 */
type FileInputModel = File | File[] | null | undefined;

/**
 * Props for the btn component.
 *
 * @since 18.0.0RC1
 * @beta
 */
type FileInputProps = {
  modelValue: FileInputModel;
  label: string;
};

Form

/**
 * Props for the btn component.
 *
 * @since 18.0.0RC1
 * @beta
 */
type FormProps = {
  onFormSubmit?: () => void;
};

Img

/**
 * @since 18.0.0RC1
 * @beta
 */
type ImgProps = unknown;

Load

/**
 * @since 18.0.0RC1
 * @beta
 */
type LoadProps = unknown;

Menu

The menu does not have props but expects to have a combination of MenuItem and MenuLabel in its default slot.

MenuItem

/**
 * @since 18.0.0RC1
 * @beta
 */
type MenuItemProps = {
  value: string;
  /**
   * @since 18.0.0RC1
   * @beta
   */
  disabled?: boolean;
};

MenuLabel

/**
 * @since 18.0.0RC1
 * @beta
 */
type MenuLabelProps = unknown;

Select

/**
 * Props of the select component.
 * @since 18.0.0RC1
 * @beta
 */
type SelectProps = {
  /**
   * Label to display.
   */
  label: string;
  /**
   * List of items to select from.
   */
  items: Array<string>;
  /**
   * Help message.
   */
  help?: string;
  /**
   * Whether or not selecting an item from the list is mandatory.
   * Default: false.
   */
  required?: boolean;
  /**
   * The v-model value of the currently selected item.
   */
  modelValue?: string;
};

Tab

/**
 * Props of the x-tab component.
 * @since 18.0.0RC1
 * @beta
 */
type TabProps = {
  tabId: string;
};

TabGroup

/**
 * @since 18.0.0RC1
 * @beta
 */
type TabGroupProps = {
  onTabChange: (tabId: string) => void;
};

TabPanel

/**
 * Props of the x-tab-panel component.
 *
 * @since 18.0.0RC1
 * @beta
 */
type TabPanelProps = {
  tabId: string;
};

TextField

/**
 * Props of the text-field component.
 * @since 18.0.0RC1
 * @beta
 */
type TextFieldProps = {
  name?: string;
  label: string;
  required?: boolean;
  /**
   * Whether the field should be focused on load or not (default: false).
   * @since 18.0.0RC1
   * @beta
   */
  autofocus?: boolean;
  modelValue?: string;
  /**
   * Help message.
   * @since 18.0.0RC1
   * @beta
   */
  help?: string;
  /**
   * Whether the field should be readonly (default: false).
   * @since 18.0.0RC1
   * @beta
   */
  readonly?: boolean;
  /**
   * Type of content.
   * @since 18.0.0RC1
   * @beta
   */
  type?:
    | "date"
    | "datetime-local"
    | "email"
    | "number"
    | "password"
    | "search"
    | "tel"
    | "text"
    | "time"
    | "url";
};

Tree

import { TreeNode } from '@xwiki/platform-fn-utils';

/**
 * Represents a TreeNode that can be displayed in a Tree component.
 * @since 18.0.0RC1
 * @beta
 */
type DisplayableTreeNode = TreeNode<{
  id: string;
  label: string;
  url?: string;
  activatable?: boolean;
}>;

/**
 * Props of the Tree component.
 * @since 18.0.0RC1
 * @beta
 */
type TreeProps<T extends DisplayableTreeNode> = {
  /**
   * Node that contains the nodes to display.
   */
  rootNode: T;
  /**
   * Whether to display the root node itself (default: false).
   */
  showRootNode?: boolean;
  /**
   * Model value that contains the id of the current activated node.
   */
  activated?: string;
  /**
   * Model value that contains the ids of the current opened nodes.
   */
  opened?: string[];
  /**
   * Optional method to call when opening a node with empty children.
   */
  lazyLoadChildren?: (node: T) => Promise<void>;
  /**
   * Optional method to call when clicking on nodes, replaces the URL click.
   */
  nodeClickAction?: (node: T) => Promise<void>;
};