Step Actions & Demo Data

import { useTourController } from '@absolutejs/tour';

// Singleton per storage key — the overlay component and a "replay" button
// in a completely different part of the tree share one switch.
const tour = useTourController('myapp.tour');

// Reactive state, persisted to sessionStorage (one key per field, no
// JSON) so a cross-page step's full reload resumes at the right index.
tour.active; // Ref<boolean>
tour.index; // Ref<number>
tour.isReplay; // Ref<boolean>

// Auto-play once on first visit, then stamp your own "seen" marker.
if (!account.tourSeenAt) tour.start();

// Replay from anywhere. isReplay stays true for the whole run, so the
// host can choose NOT to re-stamp its "seen" marker on finish.
tour.start(true);

// Stop — deactivates and resets the index to 0.
tour.stop();

import { onBeforeUnmount } from 'vue';
import { useTourActions } from '@absolutejs/tour';

// The page that OWNS the surface registers its demo handler. The tour
// overlay — mounted in a completely different part of the tree —
// resolves it by name through the same keyed singleton.
const actions = useTourActions(); // default registry key 'absolute.tour'

const unregister = actions.register('matches.demo-swipe', async (ctx) => {
	const direction = ctx.args.direction === 'left' ? 'left' : 'right';
	await swiper.value?.demoSwipe(direction); // ctx.signal aborts long demos
});

// Or several at once — the return unregisters them all.
const unregisterAll = actions.registerAll({
	'matches.demo-filter': (ctx) => filters.value?.demo(ctx.args),
	'matches.demo-sort': (ctx) => sorter.value?.demo(ctx.args)
});

// Unregister on unmount so a dead page's handler can't be resolved.
// Safe against remount races: the disposer only removes the entry if
// it still points at THIS handler.
onBeforeUnmount(unregister);
onBeforeUnmount(unregisterAll);

// Built-ins run straight from admin-authored JSON — no host code at all.
// Each takes an optional selector (default: the step's own target).
const step = {
	body: 'Filters, sort, and export live up here.',
	onEnter: [
		// Open the panel the step is about…
		{ action: 'click', args: { selector: "[data-tour='filters-toggle']" } },
		// …let the open animation finish (ms defaults to 600 when omitted)…
		{ action: 'wait', args: { ms: 700 } },
		// …and bring the panel into view (block: 'center' by default).
		{ action: 'scroll', args: { block: 'start' } }
	],
	// onExit runs when the step is left — cleanup / restore.
	onExit: [
		{ action: 'click', args: { selector: "[data-tour='filters-toggle']" } }
	],
	route: '/portal/matches',
	target: "[data-tour='filters']",
	title: 'Powerful filters'
};

// delayMs waits before an individual action runs:
// { action: 'matches.demo-swipe', args: { direction: 'left' }, delayMs: 400 }

import { tourWait, useTourActions } from '@absolutejs/tour';

// Handlers receive the full context — a handler can drive the tour
// itself (e.g. auto-advance when its demo finishes).
useTourActions().register('pipeline.demo-drag', async (ctx) => {
	// ctx.step   — the step being shown
	// ctx.target — the step's resolved target element (or null)
	// ctx.args   — plain-JSON args from the serialized ref
	// ctx.index  — the current step index
	// ctx.signal — fires when the step changes or the tour stops
	// ctx.next / ctx.back / ctx.stop — tour navigation

	await board.value?.demoDrag(ctx.args.dealId, ctx.signal);
	if (ctx.signal.aborted) return;

	// tourWait is an abortable sleep — resolves early (never rejects)
	// when the signal fires.
	await tourWait(500, ctx.signal);

	// Auto-advance once the demo finishes.
	ctx.next();
});

// A call-to-action button rendered in the step card. Its action refs run
// through the same registry as onEnter, then the tour advances unless
// advance: false.
const step = {
	body: 'Send your first invite without leaving the tour.',
	cta: {
		actions: [
			{ action: 'click', args: { selector: "[data-tour='invite']" } }
		],
		advance: false,
		label: 'Try it now'
	},
	target: "[data-tour='invite']",
	title: 'Invite your team'
};

// The host template renders it and calls the engine's runCta:
//   <button v-if="t.step.value.cta" @click="t.runCta">
//     {{ t.step.value.cta.label }}
//   </button>

import { useTourController, useTourDemo } from '@absolutejs/tour';

const controller = useTourController('myapp.tour');

const { data: matches, isDemo } = useTourDemo({
	controller,
	// The constant sample dataset. Its type IS the contract — the same
	// shape as the live data, so the surface renders it unchanged.
	demo: DEMO_MATCHES,
	// Optional: does this live value count as "has data"? Default:
	// non-nullish, and non-empty when it's an array.
	hasLive: (value) => value.length > 2,
	// Getter for the real (reactive) data; null/undefined while absent.
	live: () => realMatches.value,
	// Optional per-tutorial override, wired to Tutorial.dataMode.
	mode: () => activeTutorial.value?.dataMode
});

// matches → what the surface should render right now
// isDemo  → true while the sample is showing; badge the surface
//           ("Sample data") so it is never mistaken for real data