GroupBlock

A simple row item for displaying title and description. A block container with icon, title, description, and a custom control slot. Use TxBlockInput when a settings row needs a standard text-like input while preserving GroupBlock spacing, icons, tags, and disabled state.

BlockInput

Use TxBlockSelect when a settings row should expose a compact TxSelect without rebuilding the row chrome by hand.

BlockSelect

A block container with an integrated switch control.

Usage

GroupBlock

Initially Collapsed

Use :default-expand="false" for first-render collapsed groups. Treat collapsed as an external state input that only applies before stored state or user interaction takes over.

GroupBlock (collapsed)

Remember Expanded State

Provide a unique key for memory-name to persist expansion state.

GroupBlock (memory)

Header Extension

Use the header-extra slot for actions.

GroupBlock (header-extra)

BlockLine

Title and description remain side by side when space allows. In narrow containers, the description wraps below the title instead of being squeezed into a fixed column; long commands can wrap without clipping.

Link Styles

Displayed as a clickable link.

BlockLine (link)

BlockSlot

Active State and Labels

BlockSlot (active)

Custom Labels

BlockSlot (custom label)

BlockSwitch

Loading State

BlockSwitch (loading)

loading is forwarded straight to the inner switch: the thumb becomes a spinning ring, the row freezes without dimming, and a shimmer runs across it.

Disabled State

BlockSwitch (disabled)

Guided Mode

Displayed as a navigation item instead of a switch.

BlockSwitch (guidance)

Best Practices

• Use TxGroupBlock for compact settings and preference clusters; keep each group focused on one product area.
• Use unique, stable memoryName values. Do not reuse the same key across unrelated groups.
• Set collapsible=false for always-visible status or form sections to avoid implying hidden state.
• Use TxBlockLine for read-only values and lightweight navigation links, TxBlockSlot for custom controls, TxBlockInput / TxBlockSelect for standard form rows, and TxBlockSwitch for booleans or guidance rows.
• Keep row labels short; move long explanations to the description line or a nearby help pattern instead of adding nested layouts inside rows.
• Rows inside a group are flattened by the group, not by themselves: TxGroupBlock resets each row's --fake-radius and margin so only the group card is rounded. A row keeps its own 12px radius when used standalone, so do not copy a group's flat look by hard-coding border-radius: 0 on the row.

API Reference

TxGroupBlock Props

TxGroupBlock Events

TxGroupBlock Slots

TxBlockLine Props

TxBlockLine Events

TxBlockLine Slots

TxBlockSlot Props

TxBlockSlot Events

TxBlockSlot Slots

TxBlockInput Props

TxBlockInput Events

TxBlockInput Slots

TxBlockSelect Props

TxBlockSelect Events

TxBlockSelect Slots

TxBlockSwitch Props

TxBlockSwitch Events

TxBlockSwitch Slots

Exposed Methods

None. Use props, update:expanded, toggle, and the row-specific events instead of imperative handles.

Overview

• memoryName wins over initial defaults; stored state is saved as { expand: boolean } in localStorage.
• defaultExpand drives first render when no stored state exists. collapsed is then watched as an external input until the user toggles the group.
• After the user toggles a group, later collapsed / defaultExpand prop changes no longer overwrite the chosen state.
• Group bodies stay mounted; expansion only animates height, opacity, and display.
• TxBlockLine renders a non-interactive div by default and a native button type="button" only when link=true.
• TxBlockLine uses the same 16px row inset as other settings rows; its description wraps to a second row when the title and value cannot fit side by side.
• TxBlockSlot pins every control slot at flex-shrink: 0 so fixed-size controls never squash. TxBlockInput lifts that for itself: its field shrinks toward min-width: 120px instead of holding 180px and squeezing the row's title, which in a 240px container left the title 10px.
• TxBlockSlot blocks click emits when disabled; TxBlockSwitch freezes the whole row's pointer events while loading=true too, but the row is not dimmed — tx-block-switch--loading:not(.tx-block-switch--disabled) takes back the slot's opacity: .5 so busy and disabled stay visually distinct.
• TxBlockSwitch shows the busy cue in exactly one place: loading is forwarded to the inner TuffSwitch, whose thumb becomes a spinning ring. The row only adds a shimmer and no longer renders a separate spinner.
• TxBlockSwitch guidance mode replaces the switch with a chevron and only emits click; it does not mutate modelValue.

Technologies

• Reviewed against packages/tuffex/packages/components/src/group-block/src/types.ts and all six Vue entry points in the group-block package.
• TxBlockLine only becomes interactive when link=true; do not describe it as a generic clickable row.
• TxBlockSwitch loading mode blocks mutation, while guidance mode emits only click and should be documented as navigation, not a boolean toggle.
• Busy-state ownership: the loading visual belongs to the inner TuffSwitch (is-loading + aria-busy); TxBlockSwitch only owns the row shimmer and the un-dimming. Changing the switch's loading treatment means updating both components' docs.
• Collapsed demos intentionally use :default-expand="false"; current source watches collapsed only before storage or user interaction changes the group state.
• Flattening selector: the reset that squares off rows is a plain descendant selector. TxGroupBlock's <style> is unscoped, where :deep() is passed through untransformed and the browser discards the rule — a package-wide test now fails on :deep() in any unscoped block.
• Verified coverage: persisted expansion, static-group behavior, semantic link rows, disabled slot-click blocking, guidance mode, loading-state value-change guards, and that a loading row carries is-loading / aria-busy on the switch itself with no second spinner.
• Component sources: packages/tuffex/packages/components/src/group-block/src/TxGroupBlock.vue, TxBlockLine.vue, TxBlockSlot.vue, TxBlockInput.vue, TxBlockSelect.vue, and TxBlockSwitch.vue.
• Types: packages/tuffex/packages/components/src/group-block/src/types.ts.
• Coverage: packages/tuffex/packages/components/src/group-block/__tests__/group-block.test.ts verifies persistence, static groups, semantic link rows, slot click blocking, guidance mode, and loading-state value guards.

Customization