@mochabug/adapt-vue

@mochabug/adapt-vue

Vue component for Adapt.

Requires Vue 3.2.39 or newer. Earlier Vue declarations contain a generic constraint error that fails strict type checking with current TypeScript; 3.2.39 fixes it. The wrapper uses the Composition API and keeps its public declarations compatible across Vue 3 minors.

npm install @mochabug/adapt-vue

Framework requirements are declared in package.json.

Browser UI requires native Popover API support. Floating windows use the browser top layer and remain fixed in the viewport, including inside transformed, clipped, or scrolling containers. Docked panels and docked Maximize remain inside the embed. Docking, floating, splitting, and restoring preserve the loaded iframe document and its application state.

Windows use the viewport of the document containing the client. If that document is itself inside an iframe, its windows remain within that iframe.

Quickstart

<script setup>
import { AdaptAutomation } from '@mochabug/adapt-vue';
</script>

<template>
  <AdaptAutomation automation-id="auto-123" :style="{ height: '600px' }" />
</template>

With authentication:

<AdaptAutomation automation-id="auto-123" auth-token="your-token" :style="{ height: '600px' }" />

With proof-of-work challenge:

<AdaptAutomation automation-id="auto-123" :requires-challenge="true" :style="{ height: '600px' }" />

SSR (Nuxt)

Keep auth token on server:

<script setup>
import { AdaptAutomation } from '@mochabug/adapt-vue';
import { startSession } from '@mochabug/adapt-core';

const authToken = await getAuthTokenFromBackend();
const { token } = await startSession({ id: 'auto-123' }, authToken);
</script>

<template>
  <AdaptAutomation automation-id="auto-123" :session-token="token" :style="{ height: '600px' }" />
</template>

Session inheritance

<!-- direct -->
<AdaptAutomation automation-id="auto-123" inherit-token="token-from-parent" />

<!-- from URL hash: example.com#mb_session=xxx -->
<AdaptAutomation automation-id="auto-123" :inherit-from="{ hash: 'mb_session' }" />

Fork display

<!-- side-by-side (default) -->
<AdaptAutomation automation-id="auto-123" :fork-display="{ mode: 'side-by-side', split: 60 }" />

<!-- dialog -->
<AdaptAutomation automation-id="auto-123" :fork-display="{ mode: 'dialog' }" />

Events

<AdaptAutomation
  automation-id="auto-123"
  @session="(status, fork) => console.log(status, fork)"
  @output="(output) => console.log(output)"
  @fork-active="(active) => console.log(active)"
/>

2. AdaptCap

Standalone proof-of-work challenge widget. Use when you manage the automation client yourself.

<script setup>
import { AdaptCap, createConnectClient } from '@mochabug/adapt-vue/cap';

const client = createConnectClient({ id: 'YOUR_ID' });

function onSolve(token: string, expires: Date) {
  console.log('Solved:', token, expires);
}
</script>

<template>
  <AdaptCap
    automation-id="YOUR_ID"
    :client="client"
    @solve="onSolve"
    @error="(err) => console.error(err)"
  />
</template>

Props

Events

Headless (no UI)

Use the lower-level API to create and redeem challenges yourself:

import { createChallenge, redeemChallenge, createConnectClient } from '@mochabug/adapt-vue/cap';

const client = createConnectClient({ id: 'YOUR_ID' });
const challenge = await createChallenge(client);
// ... solve with Cap.js or your own solver ...
const redeemed = await redeemChallenge(client, solutions);

Styling

There are three ways to style the component, from simplest to most advanced. Use whichever fits your workflow.

1. theme prop (recommended)

Pass an AdaptTheme object for semantic, token-based theming without writing CSS:

<script setup>
import { AdaptAutomation } from '@mochabug/adapt-vue';

const myTheme = {
  mode: 'light',
  primary: '#4f46e5',
  background: '#ffffff',
  surface: '#f0f4ff',
  text: '#1e293b',
  textSecondary: '#64748b',
  border: '#cbd5e1',
  font: '"Inter", sans-serif',
};
</script>

<template>
  <AdaptAutomation
    automation-id="auto-123"
    :theme="myTheme"
    :style="{ height: '600px' }"
  />
</template>

AdaptTheme tokens:

The vars escape hatch lets you fine-tune any variable while keeping the rest of the theme intact:

<script setup>
const theme = {
  mode: 'dark',
  primary: '#818cf8',
  background: '#0f172a',
  surface: '#1e293b',
  text: '#f1f5f9',
  border: '#334155',
  vars: {
    'floating-radius': '16px',
    'cap-border-radius': '24px',
    'border-radius': '12px',
  },
};
</script>

<template>
  <AdaptAutomation automation-id="auto-123" :theme="theme" :style="{ height: '600px' }" />
</template>

2. CSS custom properties

Set --mb-adapt-* variables on .mb-adapt in an unscoped <style> block or a global CSS file. In Vue SFCs, scoped styles cannot reach into the custom element's internals, so use one of these approaches:

Unscoped <style> block (in any component or App.vue):

<style>
.mb-adapt {
  --mb-adapt-fork-bg: #ffffff;
  --mb-adapt-fork-tab-bg: #f5f5f5;
  --mb-adapt-fork-tab-active-bg: #ffffff;
  --mb-adapt-fork-tab-color: #1a1a1a;
  --mb-adapt-fork-tab-inactive-color: #888;
  --mb-adapt-fork-separator: #e0e0e0;
}

/* Dark mode — active when :dark-mode="true" */
.mb-adapt--dark {
  --mb-adapt-fork-bg: #1e1e1e;
  --mb-adapt-fork-tab-bg: #2a2a2a;
  --mb-adapt-fork-tab-active-bg: #1e1e1e;
  --mb-adapt-fork-tab-color: #e0e0e0;
  --mb-adapt-fork-tab-inactive-color: #777;
  --mb-adapt-fork-separator: #3a3a3a;
}
</style>

Global CSS import in main.ts:

// main.ts
import './adapt-theme.css';

/* adapt-theme.css */
.mb-adapt {
  --mb-adapt-fork-bg: #ffffff;
  --mb-adapt-fork-separator: #e0e0e0;
}

.mb-adapt--dark {
  --mb-adapt-fork-bg: #1e1e1e;
  --mb-adapt-fork-separator: #3a3a3a;
}

Typical mapping from your site's design system:

3. Direct CSS on internal classes

For effects that go beyond variables (gradients, animations, pseudo-elements), target the component's internal class names directly. There is no Shadow DOM — all classes live in the light DOM.

Because Vue scoped styles hash selectors, internal classes like .mb-group-header will not match. Use an unscoped <style> block or :global() inside a scoped block:

Animated gradient toolbar:

<style>
/* Unscoped — reaches inside the custom element */
@keyframes mb-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Light mode */
.mb-adapt .mb-group-header {
  background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #667eea);
  background-size: 300% 300%;
  animation: mb-gradient-shift 8s ease infinite;
}

.mb-adapt .mb-group-header .mb-tab {
  color: rgba(255, 255, 255, 0.7);
}

.mb-adapt .mb-group-header .mb-tab.mb-active {
  color: #ffffff;
}

/* Dark mode */
.mb-adapt--dark .mb-group-header {
  background: linear-gradient(135deg, #1e1b4b, #312e81, #4c1d95, #1e1b4b);
  background-size: 300% 300%;
  animation: mb-gradient-shift 8s ease infinite;
}

.mb-adapt--dark .mb-group-header .mb-tab {
  color: rgba(199, 210, 254, 0.7);
}

.mb-adapt--dark .mb-group-header .mb-tab.mb-active {
  color: #e0e7ff;
}
</style>

Or with :global() inside a scoped block:

<style scoped>
:global(.mb-adapt .mb-group-header) {
  background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #667eea);
  background-size: 300% 300%;
  animation: mb-gradient-shift 8s ease infinite;
}
</style>

Key internal classes:

Note: Internal class names are not covered by semver. Pin your @mochabug/adapt-vue version if you rely on them.

Using the :class-names prop

Override internal element classes for deeper customization:

<AdaptAutomation
  automation-id="auto-123"
  :class-names="{
    root: 'my-adapt-root',
    iframe: 'my-adapt-iframe',
    statusMessage: 'my-status-overlay',
    statusCard: 'my-status-card',
  }"
/>

Using the :styles prop

Apply inline styles to the internal root element (useful for sizing):

<AdaptAutomation
  automation-id="auto-123"
  :styles="{ height: '600px', maxWidth: '1200px', margin: '0 auto' }"
/>

Note: :styles targets the internal .mb-adapt root. Use Vue's :style for styles on the outer <adapt-automation> host element.

General

Toolbar and tabs

Floating panels (elevation)

Drop targets

Status cards

Cap widget

Z-index / stacking

--mb-adapt-z-base offsets local stacking and sets the priority of this instance’s floating windows. Higher priorities appear above lower priorities; within the same priority, the most recently activated window appears on top across clients. Theme changes update this priority live.

Floating chrome and iframe content are ordered together in the native top layer. Drop indicators and drag ghosts appear above windows, and close confirmations appear above those. Host-page native dialogs and popovers follow browser top-layer ordering; numeric CSS z-index cannot override that ordering.

Props

Events

License

ISC (c) mochabug AB