Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.velt.dev/llms.txt

Use this file to discover all available pages before exploring further.

New to wireframes? Start with UI Customization Concepts and the Template Variables overview.

​
Overview

The Live Selection feature renders the floating “user X is selecting this” indicator anchored to a remote user’s current selection range. Variables below are available inside <velt-selection-element-portal-wireframe> via three forms:
You want to…UseExample
Display a value as text<velt-data field="var" /><velt-data field="componentConfig.selections.0.user.name" />
Hide / show conditionallyvelt-if="{var}"velt-if="{componentConfig.selections.length} > 0"
Toggle a CSS classvelt-class="'cls': {var}"velt-class="'pos-{componentConfig.userIndicatorPosition}': true"
This feature uses the flat-config access pattern — variables are referenced via the explicit componentConfig.<path> form.

​
Component Config

VariableTypeDescriptionExample
componentConfig.positionCursorPosition | nullThe selection’s current position (top / left / right / bottom rect).Internal — used to compute inline style.
componentConfig.userIndicatorPosition'start' | 'end' | …Where the indicator is anchored relative to the selection range.velt-class="'pos-{componentConfig.userIndicatorPosition}': true"
componentConfig.userIndicatorType'Avatar' | 'Name' | …What to show — avatar, name label, or both.velt-class="'type-{componentConfig.userIndicatorType}': true"
componentConfig.overlayPosition{ originX, originY, overlayX, overlayY }CDK overlay anchoring config.Internal — CDK overlay config.
componentConfig.selectionsSelection[]Active remote selections. Each entry has user (who’s selecting) plus the selection range data.<velt-data field="componentConfig.selections.length" />

​
Type Reference

Types referenced by the variables above:
TypeDescription
UserIdentified end-user (used by componentConfig.selections.<i>.user).
CursorPositionSelection bounding-rect shape (top, left, right, bottom).
SelectionRemote-selection record — includes user and the selection range data.

​
Subcomponents

​
selection-element-portal

The floating user-indicator (avatar / name / colour bar) anchored to a remote user’s current selection range.
  • Public element: <velt-selection-element-portal>
  • Wireframe tag: <velt-selection-element-portal-wireframe>
PropertyValue
Extra variablesNone — the portal sees the full componentConfig shown above.
shouldShowNo primitive-level override — render is controlled by whether componentConfig.selections has any active entries.
<VeltSelectionElementPortalWireframe
  velt-class="'pos-{componentConfig.userIndicatorPosition}': true, 'type-{componentConfig.userIndicatorType}': true">
  <div className="my-selection-indicator">
    <span className="my-selection-indicator__name">
      <velt-data field="componentConfig.selections.0.user.name" />
    </span>
  </div>
</VeltSelectionElementPortalWireframe>

​
Putting it together

A typical selection indicator that swaps between avatar / name layouts and shows the selector’s name pill, gated on having an active selection: 
<VeltSelectionElementPortalWireframe
  velt-if="{componentConfig.selections.length} > 0"
  velt-class="'pos-{componentConfig.userIndicatorPosition}': true">
  <div className="my-indicator">
    <img
      className="my-indicator__avatar"
      velt-if="{componentConfig.userIndicatorType} === 'Avatar'" />
    <span
      className="my-indicator__name"
      velt-if="{componentConfig.userIndicatorType} === 'Name'">
      <velt-data field="componentConfig.selections.0.user.name" />
    </span>
  </div>
</VeltSelectionElementPortalWireframe>