@bluepic/embed 0.1.0

package/README.md

@@ -0,0 +1,147 @@
+# Bluepic Embed & Component Library
+
+A UI library for visual template editing – usable either as a **simple script embed** or via **modular Vue components**.
+
+---
+
+## 📦 Installation (for Vue projects)
+
+```bash
+npm install bluepic
+```
+
+Or via CDN (for embedding without a build process):
+
+```html
+<script src="https://unpkg.com/vue@3.5.13/dist/vue.global.prod.js"></script>
+<script src="https://unpkg.com/@bluepic/embed@0.1.0/lib/bluepic-fields.umd.js"></script>
+```
+
+---
+
+## 🔹 Script Embedding (`<script>` without build)
+
+### Example
+
+```html
+<div id="bluepic-embed"></div>
+
+<script>
+  window.addEventListener('load', () => {
+    const embed = new BluepicFields.BluepicEmbed('#bluepic-embed', 'TEMPLATE_ID', {
+      initData: { foo: 'bar' },
+      displayMode: 'stack',
+      darkmode: true,
+    });
+
+    embed.addEventListener('ready', (event) => {
+      console.log('Editor ready', event.detail);
+    });
+
+    embed.addEventListener('data', (event) => {
+      console.log('Data changed', event.detail.data);
+    });
+  });
+</script>
+```
+
+### Constructor
+
+```ts
+new BluepicEmbed(
+  selectorOrElement: string | HTMLElement,
+  templateId: string,
+  options?: {
+    initData?: Record<string, unknown>;
+    displayMode?: 'auto' | 'mobile' | 'stack';
+    allowPanAndZoom?: boolean;
+    darkmode?: boolean;
+    studioResourcesBaseUrl?: string;
+    cloudflarePagesHostname?: string;
+    theme?: BluepicEmbeddedEditorThemeConfig;
+    bxCoreVersion?: string;
+    publishedSlug?: string;
+  }
+);
+```
+
+### Public Methods
+
+```ts
+embed.setVariable(key: string, value: unknown): void;
+embed.setData(data: Record<string, unknown>, forceOverwrite?: boolean): void;
+```
+
+### Events
+
+- `ready`: Fired when the editor is fully initialized
+- `data`: Fired when `data` changes (`event.detail.data`)
+
+---
+
+## 🔸 Vue Components (modular usage)
+
+### App Initialization
+
+```ts
+import { createApp } from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#app');
+```
+
+### Main Imports
+
+```ts
+import { BluepicEmbeddedEditor, BxFields, createPopup, BluepicEmbed, BluepicFieldComponents } from 'bluepic';
+```
+
+### `BluepicEmbeddedEditor`
+
+The main component for visual editing.
+
+```vue
+<template>
+  <bluepic-embedded-editor
+    v-model:data="data"
+    :template-id="templateId"
+    inline
+    :display-mode="'stack'"
+    :zoom-and-pan="false"
+    v-model:ready="ready"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const templateId = 'TEMPLATE_ID';
+const data = ref({});
+const ready = ref(false);
+</script>
+```
+
+---
+
+## 🧩 `createPopup(options)`
+
+Shows a modal popup overlay.
+
+```ts
+const popup = createPopup({
+  title: 'Confirm',
+  content: 'Do you want to continue?',
+  actions: [
+    {
+      label: 'OK',
+      icon: () => h(BxIcon, { name: 'check' }),
+      props: { variant: 'primary' },
+    },
+  ],
+  darkmode: true,
+});
+```
+
+```ts
+popup.close(); // Programmatically close the popup
+```