CellLink

Basic Usage

CellLink

Why It Does Not Navigate

The component renders a genuine <a href> — copy-link, hover preview, and the context menu all work — but calls preventDefault() on click and emits open instead.

This is not fastidiousness. tuffex ships into both the browser and the Electron renderer, and inside the renderer a self-navigating link walks the application window away from itself, which is a real security and usability problem. Handing the decision to the host is what lets one component behave correctly in both. TxSources established this convention already, and this component follows it.

API

Props

Events

Slots

Interaction Contract

• It renders a native <a>, so pressing Enter fires open too — no extra handling required.
• underline="hover" shows the rule only on hover and :focus-visible, which suits columns whose text is the primary content anyway.
• underline="always" keeps a permanent rule tinted to 35%, going solid on hover — right for a dedicated link column, where a full column of solid underlines turns into a block of rules.
• The outbound arrow is aria-hidden and never announced; put the destination information in ariaLabel.
• Long text truncates with an ellipsis, so a link cannot blow out its cell.

Best Practices

• When the text is a bare domain, add an ariaLabel such as "Open the Aurora Scoops website" — otherwise a screen reader just spells out a hostname.
• Use muted with underline="hover" for record-name columns, and the default colour with underline="always" for dedicated link columns.
• In the Electron renderer, route the open event through the host's external-browser channel rather than opening a window in the renderer.
• For a cell with no link, render a placeholder such as — rather than a TxCellLink with an empty href.

Source

• Component source: packages/tuffex/packages/components/src/cell-link/src/TxCellLink.vue.
• Types: packages/tuffex/packages/components/src/cell-link/src/types.ts exports CellLinkProps, CellLinkEmits, and CellLinkUnderline.
• Test coverage: packages/tuffex/packages/components/src/cell-link/__tests__/cell-link.test.ts has 6 cases covering the native anchor and its href, the label fallback, open emission after preventDefault() (asserting defaultPrevented), conditional rendering and aria-hidden on the arrow, the underline and muted state classes, and the accessible-name override.