@mochabug/adapt-vue 1.0.0-rc1

package/README.md

@@ -0,0 +1,101 @@
+# @mochabug/adapt-vue
+
+Vue component for Adapt.
+
+```bash
+npm install @mochabug/adapt-vue
+```
+
+Requires Vue 3.
+
+## Quickstart
+
+```vue
+<script setup>
+import { AdaptAutomation } from '@mochabug/adapt-vue';
+</script>
+
+<template>
+  <AdaptAutomation id="auto-123" :style="{ height: '600px' }" />
+</template>
+```
+
+If the automation requires authentication:
+
+```vue
+<AdaptAutomation id="auto-123" auth-token="your-token" :style="{ height: '600px' }" />
+```
+
+## SSR (Nuxt)
+
+Keep auth token on server:
+
+```vue
+<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
+    id="auto-123"
+    :session-token="token"
+    :style="{ height: '600px' }"
+  />
+</template>
+```
+
+## Session inheritance
+
+```vue
+<!-- direct -->
+<AdaptAutomation id="auto-123" inherit-token="token-from-parent" />
+
+<!-- from URL hash: example.com#mb_session=xxx -->
+<AdaptAutomation id="auto-123" :inherit-from="{ hash: 'mb_session' }" />
+```
+
+## Fork display
+
+```vue
+<!-- side-by-side -->
+<AdaptAutomation
+  id="auto-123"
+  fork-display-mode="side-by-side"
+  :side-by-side-split="60"
+/>
+
+<!-- dialog -->
+<AdaptAutomation
+  id="auto-123"
+  fork-display-mode="dialog"
+  :dialog-backdrop-close="true"
+/>
+```
+
+## Props
+
+| Prop | Type |
+|------|------|
+| `id` | `string` (required) |
+| `session-token` | `string` |
+| `auth-token` | `string` |
+| `inherit-token` | `string` |
+| `inherit-from` | `{ hash: string } \| { param: string }` |
+| `fork-display-mode` | `'side-by-side' \| 'dialog'` |
+| `side-by-side-split` | `number` (0-100) |
+| `dialog-backdrop-close` | `boolean` |
+
+## Events
+
+| Event | Payload |
+|-------|---------|
+| `session` | `(status, fork?)` |
+| `output` | `(output)` |
+
+## License
+
+ISC © mochabug AB

package/dist/esm/index.js

@@ -0,0 +1,122 @@
+import { defineComponent, ref, onMounted, onUnmounted, watch, h, } from "vue";
+import { AdaptWebClient } from "@mochabug/adapt-web";
+/**
+ * Vue component for embedding Adapt automations.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <AdaptAutomation
+ *     id="automation-123"
+ *     class="my-automation"
+ *     :style="{ height: '600px' }"
+ *     @session="handleSession"
+ *   />
+ * </template>
+ *
+ * <script setup>
+ * import { AdaptAutomation } from '@mochabug/adapt-vue';
+ *
+ * const handleSession = (status, fork) => {
+ *   console.log('Status:', status, fork);
+ * };
+ * </script>
+ * ```
+ */
+export const AdaptAutomation = defineComponent({
+    name: "AdaptAutomation",
+    inheritAttrs: false,
+    props: {
+        /** Automation ID to connect to */
+        id: {
+            type: String,
+            required: true,
+        },
+        /** Pre-created session token from server-side session creation */
+        sessionToken: {
+            type: String,
+            default: undefined,
+        },
+        /** Authentication token for starting new sessions */
+        authToken: {
+            type: String,
+            default: undefined,
+        },
+        /** Token to inherit an existing session */
+        inheritToken: {
+            type: String,
+            default: undefined,
+        },
+        /** Auto-parse inherit token from URL */
+        inheritFrom: {
+            type: Object,
+            default: undefined,
+        },
+        /** Fork display mode (default: 'side-by-side') */
+        forkDisplayMode: {
+            type: String,
+            default: "side-by-side",
+        },
+        /** Split percentage for side-by-side mode, 0-100 (default: 50) */
+        sideBySideSplit: {
+            type: Number,
+            default: 50,
+        },
+        /** Allow closing dialog via backdrop click (default: false) */
+        dialogBackdropClose: {
+            type: Boolean,
+            default: false,
+        },
+        /** Custom CSS class names for internal elements */
+        classNames: {
+            type: Object,
+            default: undefined,
+        },
+    },
+    emits: {
+        /** Emitted when session status changes */
+        session: (_status, _fork) => true,
+        /** Emitted when automation produces output */
+        output: (_output) => true,
+    },
+    setup(props, { emit, attrs }) {
+        const containerId = `adapt-${Math.random().toString(36).slice(2, 11)}`;
+        const clientRef = ref(null);
+        const createClient = () => {
+            if (clientRef.value) {
+                clientRef.value.destroy();
+                clientRef.value = null;
+            }
+            clientRef.value = new AdaptWebClient({
+                container: containerId,
+                id: props.id,
+                sessionToken: props.sessionToken,
+                authToken: props.authToken,
+                inheritToken: props.inheritToken,
+                inheritFrom: props.inheritFrom,
+                forkDisplayMode: props.forkDisplayMode,
+                sideBySideSplit: props.sideBySideSplit,
+                dialogBackdropClose: props.dialogBackdropClose,
+                classNames: props.classNames,
+                onSession: (status, fork) => {
+                    emit("session", status, fork);
+                },
+                onOutput: (output) => {
+                    emit("output", output);
+                },
+            });
+        };
+        onMounted(() => {
+            createClient();
+        });
+        onUnmounted(() => {
+            if (clientRef.value) {
+                clientRef.value.destroy();
+                clientRef.value = null;
+            }
+        });
+        watch(() => props.id, createClient);
+        return () => h("div", { id: containerId, ...attrs });
+    },
+});
+export default AdaptAutomation;

package/dist/types/index.d.ts

@@ -0,0 +1,165 @@
+import { type PropType } from "vue";
+import { type AdaptWebClientOptions } from "@mochabug/adapt-web";
+import type { Output, StatusJson } from "@mochabug/adapt-core";
+export type { Output, StatusJson };
+/**
+ * Vue component for embedding Adapt automations.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <AdaptAutomation
+ *     id="automation-123"
+ *     class="my-automation"
+ *     :style="{ height: '600px' }"
+ *     @session="handleSession"
+ *   />
+ * </template>
+ *
+ * <script setup>
+ * import { AdaptAutomation } from '@mochabug/adapt-vue';
+ *
+ * const handleSession = (status, fork) => {
+ *   console.log('Status:', status, fork);
+ * };
+ * </script>
+ * ```
+ */
+export declare const AdaptAutomation: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** Automation ID to connect to */
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** Pre-created session token from server-side session creation */
+    sessionToken: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Authentication token for starting new sessions */
+    authToken: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Token to inherit an existing session */
+    inheritToken: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Auto-parse inherit token from URL */
+    inheritFrom: {
+        type: PropType<{
+            hash: string;
+        } | {
+            param: string;
+        }>;
+        default: undefined;
+    };
+    /** Fork display mode (default: 'side-by-side') */
+    forkDisplayMode: {
+        type: PropType<"side-by-side" | "dialog">;
+        default: string;
+    };
+    /** Split percentage for side-by-side mode, 0-100 (default: 50) */
+    sideBySideSplit: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Allow closing dialog via backdrop click (default: false) */
+    dialogBackdropClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Custom CSS class names for internal elements */
+    classNames: {
+        type: PropType<AdaptWebClientOptions["classNames"]>;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    /** Emitted when session status changes */
+    session: (_status: StatusJson, _fork?: string) => true;
+    /** Emitted when automation produces output */
+    output: (_output: Output) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** Automation ID to connect to */
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** Pre-created session token from server-side session creation */
+    sessionToken: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Authentication token for starting new sessions */
+    authToken: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Token to inherit an existing session */
+    inheritToken: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Auto-parse inherit token from URL */
+    inheritFrom: {
+        type: PropType<{
+            hash: string;
+        } | {
+            param: string;
+        }>;
+        default: undefined;
+    };
+    /** Fork display mode (default: 'side-by-side') */
+    forkDisplayMode: {
+        type: PropType<"side-by-side" | "dialog">;
+        default: string;
+    };
+    /** Split percentage for side-by-side mode, 0-100 (default: 50) */
+    sideBySideSplit: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Allow closing dialog via backdrop click (default: false) */
+    dialogBackdropClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Custom CSS class names for internal elements */
+    classNames: {
+        type: PropType<AdaptWebClientOptions["classNames"]>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onSession?: ((_status: StatusJson, _fork?: string | undefined) => any) | undefined;
+    onOutput?: ((_output: Output) => any) | undefined;
+}>, {
+    classNames: {
+        root?: string;
+        wrapper?: string;
+        frame?: string;
+        frameMain?: string;
+        frameFork?: string;
+        iframe?: string;
+        dialogBackdrop?: string;
+        dialog?: string;
+        dialogBanner?: string;
+        dialogClose?: string;
+        dragHandle?: string;
+        expandButton?: string;
+    } | undefined;
+    sessionToken: string;
+    authToken: string;
+    inheritToken: string;
+    inheritFrom: {
+        hash: string;
+    } | {
+        param: string;
+    };
+    forkDisplayMode: "side-by-side" | "dialog";
+    sideBySideSplit: number;
+    dialogBackdropClose: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default AdaptAutomation;

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@mochabug/adapt-vue",
+  "version": "1.0.0-rc1",
+  "description": "Vue component for Adapt automation platform",
+  "type": "module",
+  "main": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build:esm": "tsc --project tsconfig.esm.json",
+    "build:types": "tsc --project tsconfig.types.json",
+    "build": "rm -rf dist && npm run build:esm && npm run build:types",
+    "sample": "cd sample && npm run dev"
+  },
+  "keywords": [
+    "adapt",
+    "automations",
+    "mochabug",
+    "vue"
+  ],
+  "author": "mochabug AB",
+  "license": "ISC",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "vue": "^3.5.24"
+  },
+  "dependencies": {
+    "@mochabug/adapt-web": "^1.0.0-rc22"
+  }
+}