@bluepic/embed 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -43
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,47 +2,46 @@
|
|
|
2
2
|
|
|
3
3
|
A UI library for visual template editing – usable either as a **simple script embed** or via **modular Vue components**.
|
|
4
4
|
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
## 📦 Installation (for Vue projects)
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
npm install bluepic
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
Or via CDN (for embedding without a build process):
|
|
14
|
-
|
|
15
|
-
```html
|
|
16
|
-
<script src="https://unpkg.com/vue@3.5.13/dist/vue.global.prod.js"></script>
|
|
17
|
-
<script src="https://unpkg.com/@bluepic/embed@0.1.2/lib/bluepic-fields.umd.js"></script>
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
---
|
|
21
|
-
|
|
22
5
|
## 🔹 Script Embedding (`<script>` without build)
|
|
23
6
|
|
|
24
7
|
### Example
|
|
25
8
|
|
|
26
9
|
```html
|
|
27
|
-
<
|
|
28
|
-
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
10
|
+
<head>
|
|
11
|
+
<!-- ... -->
|
|
12
|
+
<link rel="stylesheet" href="https://unpkg.com/@bluepic/embed@0.1.3/lib/style.css" />
|
|
13
|
+
<!-- ... -->
|
|
14
|
+
</head>
|
|
15
|
+
|
|
16
|
+
<body>
|
|
17
|
+
<!-- ... -->
|
|
18
|
+
|
|
19
|
+
<!-- The embed app wrapper element -->
|
|
20
|
+
<div id="bluepic-embed"></div>
|
|
21
|
+
|
|
22
|
+
<!-- Important: vue3 and @bluepic/embed -->
|
|
23
|
+
<script src="https://unpkg.com/vue@3.5.13/dist/vue.global.prod.js"></script>
|
|
24
|
+
<script src="https://unpkg.com/@bluepic/embed@0.1.3/lib/bluepic-fields.umd.js"></script>
|
|
25
|
+
<script>
|
|
26
|
+
// Wait for window to load
|
|
27
|
+
window.addEventListener('load', () => {
|
|
28
|
+
// Initialize embed instance
|
|
29
|
+
const embed = new BluepicFields.BluepicEmbed('#bluepic-embed', 'TEMPLATE_ID', {
|
|
30
|
+
initData: { foo: 'bar' },
|
|
31
|
+
displayMode: 'stack',
|
|
32
|
+
darkmode: true,
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
embed.addEventListener('ready', (event) => {
|
|
36
|
+
console.log('Editor ready', event.detail);
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
embed.addEventListener('data', (event) => {
|
|
40
|
+
console.log('Data changed', event.detail.data);
|
|
41
|
+
});
|
|
43
42
|
});
|
|
44
|
-
|
|
45
|
-
</
|
|
43
|
+
</script>
|
|
44
|
+
</body>
|
|
46
45
|
```
|
|
47
46
|
|
|
48
47
|
### Constructor
|
|
@@ -81,19 +80,16 @@ embed.setData(data: Record<string, unknown>, forceOverwrite?: boolean): void;
|
|
|
81
80
|
|
|
82
81
|
## 🔸 Vue Components (modular usage)
|
|
83
82
|
|
|
84
|
-
###
|
|
85
|
-
|
|
86
|
-
```ts
|
|
87
|
-
import { createApp } from 'vue';
|
|
88
|
-
import App from './App.vue';
|
|
83
|
+
### 📦 Installation
|
|
89
84
|
|
|
90
|
-
|
|
85
|
+
```bash
|
|
86
|
+
npm install bluepic
|
|
91
87
|
```
|
|
92
88
|
|
|
93
89
|
### Main Imports
|
|
94
90
|
|
|
95
91
|
```ts
|
|
96
|
-
import { BluepicEmbeddedEditor, BxFields, createPopup, BluepicEmbed, BluepicFieldComponents } from 'bluepic';
|
|
92
|
+
import { BluepicEmbeddedEditor, BxFields, createPopup, BluepicEmbed, BluepicFieldComponents } from '@bluepic/embed';
|
|
97
93
|
```
|
|
98
94
|
|
|
99
95
|
### `BluepicEmbeddedEditor`
|
|
@@ -106,7 +102,7 @@ The main component for visual editing.
|
|
|
106
102
|
v-model:data="data"
|
|
107
103
|
:template-id="templateId"
|
|
108
104
|
inline
|
|
109
|
-
:display-mode="'
|
|
105
|
+
:display-mode="'auto'"
|
|
110
106
|
:zoom-and-pan="false"
|
|
111
107
|
v-model:ready="ready"
|
|
112
108
|
/>
|