Block
Interface: Block<T>
Type parameters
| Name | Type |
|---|---|
T | unknown |
Table of contents
Properties
Methods
Properties
type
• type: Ref<"custom" | "card" | "modal" | "checklist" | "checklistItem" | "hints" | "hintsItem" | "tour" | "tourItem">
Defined in
packages/@dopt/vue/src/block.ts:9
kind
• kind: Ref<"block">
Defined in
packages/@dopt/vue/src/block.ts:10
uid
• uid: Ref<string>
Defined in
packages/@dopt/vue/src/block.ts:11
sid
• sid: Ref<string>
Defined in
packages/@dopt/vue/src/block.ts:12
version
• version: Ref<number>
Defined in
packages/@dopt/vue/src/block.ts:13
state
• state: Ref<{ active: boolean ; entered: boolean ; exited: boolean }>
The up-to-date state of this Block.
Defined in
packages/@dopt/vue/src/block.ts:18
transitioned
• transitioned: T extends [string, ...string[]] ? Ref<Record<T[number], undefined | boolean>> : Ref<Record<string, undefined | boolean>>
Returns the up-to-date transitioned values for this Block instance.
Example
const { transitioned } = useBlock("HNWvcT78tyTwygnbzU6SW");
const first = transitioned.value['first-edge'];
In typescript, if a block is accessed with generics:
const { transitioned } = useBlock<['a-edge']>("HNWvcT78tyTwygnbzU6SW");
// this is valid
transitioned.value['a-edge'];
// this is invalid
transitioned.value['b-edge'];
Defined in
packages/@dopt/vue/src/block.ts:43
field
• field: Ref<<V>(name: string) => undefined | null | V>
Gets the field with the name contained by this Block.
If DoptPlugin is loading or Block does not have a field
with the specified name, undefined is returned.
null is returned when the field has been explicitly
configured in app.dopt.com to have an empty value.
Defined in
packages/@dopt/vue/src/block.ts:56
Methods
transition
▸ transition(...input): void
Transition this block. Will also update the state of blocks within this flow, as appropriate. This function must be called with at least one transition.
Example
const block = useBlock("HNWvcT78tyTwygnbzU6SW");
// transitioning a single edge
block.transition('first-edge');
// transitioning multiple edges
block.transition('second-edge', 'third-edge');
In typescript, if a block is accessed with generics:
const block = useBlock<['a-edge']>("HNWvcT78tyTwygnbzU6SW");
// this is valid
block.transition('a-edge');
// this is invalid
block.transition('b-edge');
Remarks
This function will update state with Dopt and trigger changes. Subscribe to the flows and blocks you care about to react to those changes.
Parameters
| Name | Type |
|---|---|
...input | T extends [string, ...string[]] ? [T[number], ...T[number][]] : [string, ...string[]] |
Returns
void
void