@myop/vue 0.0.23 → 0.0.25

package/README.md

@@ -1,5 +1,240 @@
-# Vue 3 + TypeScript + Vite
+# @myop/vue
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+Official Vue bindings for embedding [Myop](https://myop.dev) components in your Vue applications.
 
-Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+Myop components are framework-agnostic UI components that can be updated in real-time without redeploying your application. Build once, embed anywhere, and iterate instantly. Perfect for teams that need to ship UI changes fast, A/B test components, or empower non-developers to customize the interface. Myop is also the safest way to adopt AI-generated components in your application—whether created by developers or non-developers—with built-in sandboxing and controlled integration.
+
+[![npm version](https://img.shields.io/npm/v/@myop/vue.svg)](https://www.npmjs.com/package/@myop/vue)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+[![Discord](https://img.shields.io/badge/Discord-Join%20us-5865F2?logo=discord&logoColor=white)](https://myop.dev/discord)
+
+[Website](https://www.myop.dev/) | [Documentation](https://docs.myop.dev/) | [Dashboard](https://dashboard.myop.dev/) | [Discord](https://myop.dev/discord)
+
+## Installation
+
+```bash
+npm install @myop/vue
+```
+
+```bash
+yarn add @myop/vue
+```
+
+```bash
+pnpm add @myop/vue
+```
+
+## Requirements
+
+- Vue 3.0+
+
+## Quick Start
+
+```vue
+<script setup lang="ts">
+import { MyopContainer } from "@myop/vue";
+
+function handleReady(component) {
+  console.log("Component loaded!", component);
+}
+</script>
+
+<template>
+  <MyopContainer
+    componentId="your-component-id"
+    :onReady="handleReady"
+    :style="{ width: '600px', height: '400px' }"
+  />
+</template>
+```
+
+## Components
+
+### `MyopContainer`
+
+The main component for embedding Myop components in Vue applications.
+
+```vue
+<script setup lang="ts">
+import { MyopContainer } from "@myop/vue";
+import type { IMyopComponent } from "@myop/sdk/host";
+
+const items = [
+  { id: 1, name: "Item 1" },
+  { id: 2, name: "Item 2" },
+];
+
+function handleReady(component: IMyopComponent, innerVueComponentRef?: any) {
+  console.log("Component ready!", component);
+  // Access inner Vue component if the Myop component is Vue-based
+  if (innerVueComponentRef) {
+    console.log("Inner Vue component:", innerVueComponentRef);
+  }
+}
+</script>
+
+<template>
+  <MyopContainer
+    componentId="abc123"
+    :items="items"
+    :onReady="handleReady"
+  >
+    <template #loading>
+      <div class="loading-spinner">Loading...</div>
+    </template>
+  </MyopContainer>
+</template>
+```
+
+#### Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `componentId` | `string` | **Required.** The ID of the Myop component to load |
+| `flowId` | `string` | Optional flow ID for component resolution |
+| `onReady` | `(component, innerVueRef?) => void` | Called when the component finishes loading |
+
+#### Passing Data
+
+Pass data to your Myop component using Vue's attribute binding. All attributes are forwarded to the component:
+
+```vue
+<template>
+  <MyopContainer
+    componentId="my-table"
+    :rows="tableData"
+    :columns="columnConfig"
+    :sortable="true"
+    title="Users Table"
+  />
+</template>
+```
+
+#### Loading Slot
+
+Display a custom loading indicator using the `loading` slot:
+
+```vue
+<template>
+  <MyopContainer componentId="my-component">
+    <template #loading>
+      <div class="custom-loader">
+        <span>Loading component...</span>
+      </div>
+    </template>
+  </MyopContainer>
+</template>
+```
+
+## Vue-to-Vue Integration
+
+When your Myop component is built with Vue, you get seamless integration:
+
+- **Prop reactivity**: Props passed to `MyopContainer` automatically flow to the inner Vue component
+- **Expose access**: Access the inner component's exposed properties and methods via the `innerVueComponentRef` parameter in `onReady`
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { MyopContainer } from "@myop/vue";
+
+const myopContainerRef = ref(null);
+
+function handleReady(component, innerVueRef) {
+  // Call methods exposed by the inner Vue component
+  if (innerVueRef?.someMethod) {
+    innerVueRef.someMethod();
+  }
+}
+</script>
+
+<template>
+  <MyopContainer
+    ref="myopContainerRef"
+    componentId="vue-component"
+    :onReady="handleReady"
+  />
+</template>
+```
+
+## Handling Events
+
+Myop components can emit CTA (Call-to-Action) events. Handle them using the component reference:
+
+```vue
+<script setup lang="ts">
+import { MyopContainer } from "@myop/vue";
+
+function handleReady(component) {
+  // Subscribe to CTA events
+  component.on("row-clicked", (payload) => {
+    console.log("Row clicked:", payload);
+  });
+
+  component.on("export-requested", (payload) => {
+    console.log("Export format:", payload.format);
+  });
+}
+</script>
+
+<template>
+  <MyopContainer
+    componentId="data-table"
+    :onReady="handleReady"
+  />
+</template>
+```
+
+## TypeScript Support
+
+The package includes full TypeScript support:
+
+```vue
+<script setup lang="ts">
+import { MyopContainer } from "@myop/vue";
+import type { IMyopComponent } from "@myop/sdk/host";
+
+interface TableData {
+  rows: { id: number; name: string }[];
+}
+
+const tableData: TableData = {
+  rows: [
+    { id: 1, name: "Alice" },
+    { id: 2, name: "Bob" },
+  ],
+};
+
+function handleReady(component: IMyopComponent) {
+  console.log("Loaded:", component);
+}
+</script>
+
+<template>
+  <MyopContainer
+    componentId="users-table"
+    v-bind="tableData"
+    :onReady="handleReady"
+  />
+</template>
+```
+
+## API Reference
+
+### Exports
+
+| Export | Description |
+|--------|-------------|
+| `MyopContainer` | Main component for embedding Myop components |
+
+### MyopContainer Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `componentId` | `string` | Yes | The ID of the Myop component to load |
+| `flowId` | `string` | No | Flow ID for component resolution |
+| `onReady` | `function` | No | Callback when component is ready |
+
+## License
+
+MIT