x

@kumahq/x

Application level UI components.

'x' components are generally 'thin wrappers' over either native Vue components or Kongponents to make them easier to work with.

For example:

• XAction: Use these for <a>s or <button>s. They wrap Vue's RouterLink.
• XTeleportTemplate/XTeleportSlot: Use these for rendering things in a different place to where you are writing it. They wrap Vue's Teleport.
• XTabs: Basic tab navigation. They wrap KTabs.
• XCard/XTimespan: Use these for detail view "About" sections. Place XTimespan inside XCard to show created/modified timestamps.
• ...

Components

• XAboutCard - Displays entity about-information with formatted timestamps.
• XAction - Renders as a button, link, or router-link depending on context. (RouterLink)
• XActionGroup - Dropdown action menu that expands to a button group in wider layouts.
• XAlert - Dismissible alert notification message. (KAlert)
• XAnonymous - Transparent wrapper that only renders its slot content.
• XBadge - Status badge with optional icon. (KBadge)
• XBreadcrumbs - Navigation breadcrumb trail. (KBreadcrumbs)
• XCard - Contextual card container with action-aware styling. (KCard)
• XCheckbox - Checkbox input with slot support. (KCheckbox)
• XCodeBlock - Syntax-highlighted code viewer with optional editing support.
• XCopyButton - Copy-to-clipboard button with optional custom formatting. (KCopy)
• XCopyButtonDebug - Debug variant of XCopyButton that logs copied text to the console.
• XDisclosure - Expandable/collapsible content toggle. (KToggle)
• XDl - Definition list with an optional inline stack variant.
• XDownload - Provides a download helper function with automatic blob URL cleanup.
• XDrawer - Slide-out side panel with title teleport support. (KSlideout)
• XEmptyState - Empty state display with icon mapping and i18n support. (KEmptyState)
• XErrorState - Contextual error display, adapting to modal or standalone layouts.
• XI18n - Safe HTML template rendering with ICU message format and teleport slots.
• XIcon - Icon renderer with optional tooltip and policy role indicators.
• XInput - Text input with optional debounce and search variant. (KInput)
• XInputSwitch - Toggle switch component. (KInputSwitch)
• XLayout - Flexible layout system supporting stack, column, and action-group variants.
• XModal - Modal dialog with cancel event support. (KModal)
• XNotification - Notification banner or toast with deduplication via XNotificationHub.
• XNotificationHub - Provider that manages banner and toast notifications with deduplication.
• XProgress - Loading indicator supporting spinner, skeleton, and line variants.
• XPrompt - Confirmation dialog with action and cancel events. (KPrompt)
• XProvider - Service provider using Vue's inject/provide pattern.
• XRadio - Radio button with card variant support. (KRadio)
• XRouter - Router component to install a global (or scoped) click listener/router pusher.
• XSearch - Search input with filter dropdown validation.
• XSelect - Select dropdown with slot-based option rendering. (KSelect)
• XTable - Semantic table wrapper with key-value variant support.
• XTabs - Tab navigation with custom slot handling. (KTabs)
• XTimespan - Displays timestamps
• XTeleportSlot - Marks a teleport target location in the DOM. (Teleport)
• XTeleportTemplate - Conditionally teleports content to a named XTeleportSlot. (Teleport)
• XTheme - Theme provider that exposes design tokens via CSS variables.
• XTooltip - Tooltip with customizable placement. (KTooltip)
• XWindow - Provides resize events via a slot by listening to window events.

Directives

• vIcon - Generates CSS variables for icon name and size properties.
• vStyle - Applies dynamic CSS style declarations from an object or string.