Dialog

Usage

Bottom Dialog

TxBottomDialog is a mobile-style bottom confirmation, also used as a checkpoint before destructive actions.

Action Rows and Icons

Each button renders as a full-width action row, with icon as its leading glyph.

Button Types

Only type: 'error' colors a row; info, warning, and success all render as neutral rows.

const btns = [
  { content: 'Neutral row', type: 'info', onClick: () => true },
  { content: 'Also neutral', type: 'success', onClick: () => true },
  { content: 'Destructive row', type: 'error', onClick: () => true },
]

Auto Confirm

time counts down in seconds and clicks the row when it reaches zero.

const btns = [
  { content: 'Auto confirm', type: 'success', time: 5, onClick: () => true },
]

Loading State

While onClick runs, the row is disabled and shows a spinner, so it can't be submitted twice.

const btns = [
  {
    content: 'Submit',
    type: 'success',
    onClick: async () => {
      await saveData()
      return true
    },
  },
]

Blow Dialog

TxBlowDialog is a centered, high-emphasis dialog that transforms the background as it opens.

Popper Dialog

TxPopperDialog is a compact centered prompt that keeps modal semantics.

Touch Tip

TxTouchTip is a touch-first guidance prompt with several action buttons.

Custom Content

TxBlowDialog and TxPopperDialog replace their default content with comp or render.

import CustomContent from './CustomContent.vue'

// Component
h(TxBlowDialog, { comp: CustomContent, close: () => {} })

// Render function
h(TxBlowDialog, {
  render: () => h('div', [
    h('h2', 'Dynamic content'),
    h('p', 'Created with a render function'),
  ]),
  close: () => {},
})

Best Practices

• Keep at most one destructive row, mark it type: 'error', and state the consequence in its label; color only reinforces it.
• Pass icon as a class the host's icon pipeline generates statically (i-carbon-trash-can); a name built at runtime renders an empty box.
• Reserve TxBlowDialog for rare, high-emphasis announcements; its background transform is dramatic.
• Never pass user-generated content to messageHtml unless it is sanitized and marked with asTrustedDialogHtml().

API Reference

TxBottomDialog

Props

TxBlowDialog / TxPopperDialog

Props

Both take the same props.

TxTouchTip

Props

Types

interface DialogButton {
  content: string
  type?: 'info' | 'warning' | 'error' | 'success' // only 'error' colors the row
  icon?: string // leading icon class
  time?: number // countdown in seconds; clicks the row at zero
  onClick: () => Promise<boolean> | boolean // true closes, false stays open
  loading?: (done: () => void) => void // the row stays loading until done()
}

// TxTouchTip buttons: no icon or time
interface TouchTipButton {
  content: string
  type?: 'info' | 'warning' | 'error' | 'success'
  onClick: () => Promise<boolean> | boolean
  loading?: (done: () => void) => void
}

function asTrustedDialogHtml(html: string): TrustedDialogHtml

Overview

• All four variants teleport to body and take their layer from the shared z-index manager.
• They emit no events and have no slots; they close only through the required close callback.
• Escape calls close() after the leave animation; the TxBottomDialog close button also only cancels and never fires a row action.
• Focus returns to the previously focused element on unmount; useId() ids wire the title and body to aria-labelledby / aria-describedby.
• message renders as plain text with line breaks kept; messageHtml accepts only values marked by asTrustedDialogHtml(), which does not sanitize.
• Bodies set overflow-wrap: anywhere and cap their own height with scrolling, so long tokens don't widen the panel and long content isn't clipped.

Technologies

• The entry exports the four variants (each wrapped with withInstall), asTrustedDialogHtml, and the public types.
• Source: packages/tuffex/packages/components/src/dialog/.