@myissue/vue-website-page-builder 3.3.12 → 3.3.14
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 +14 -26
- package/dist/vue-website-page-builder.css +1 -1
- package/dist/vue-website-page-builder.js +5105 -5071
- package/dist/vue-website-page-builder.umd.cjs +37 -37
- package/package.json +1 -1
- package/src/Components/Loaders/GlobalLoader.vue +1 -1
- package/src/Components/Modals/ModalBuilder.vue +2 -2
- package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue +2 -2
- package/src/DemoComponents/HomeSection.vue +6 -3
- package/src/DemoComponents/html.json +46 -48
- package/src/PageBuilder/PageBuilder.vue +85 -39
- package/src/composables/PageBuilderService.ts +296 -273
- package/src/stores/page-builder-state.ts +1 -1
- package/src/tailwind-safelist.html +1 -1
- package/src/types/index.ts +2 -4
package/README.md
CHANGED
|
@@ -178,7 +178,7 @@ const configPageBuilder = {
|
|
|
178
178
|
const pageBuilderService = getPageBuilder()
|
|
179
179
|
const result = await pageBuilderService.startBuilder(configPageBuilder)
|
|
180
180
|
|
|
181
|
-
console.
|
|
181
|
+
console.info('You may inspect this result for message, status, or error:', result)
|
|
182
182
|
</script>
|
|
183
183
|
|
|
184
184
|
<template>
|
|
@@ -299,7 +299,7 @@ const configPageBuilder = {
|
|
|
299
299
|
const pageBuilderService = getPageBuilder()
|
|
300
300
|
const result = await pageBuilderService.startBuilder(configPageBuilder)
|
|
301
301
|
|
|
302
|
-
console.
|
|
302
|
+
console.info('You may inspect this result for message, status, or error:', result)
|
|
303
303
|
</script>
|
|
304
304
|
|
|
305
305
|
<template>
|
|
@@ -390,9 +390,12 @@ The `startBuilder` method accepts two arguments:
|
|
|
390
390
|
1. **Configuration** (required):
|
|
391
391
|
The builder configuration object.
|
|
392
392
|
2. **Components Data** (optional):
|
|
393
|
-
An object
|
|
393
|
+
An array of component objects. Each object must include a `html_code` string and may optionally include a title string. This is especially useful when loading previously published or saved content into the builder.
|
|
394
394
|
|
|
395
|
-
|
|
395
|
+
**Important**
|
|
396
|
+
|
|
397
|
+
To load existing content into the Page Builder, ensure that the formType is set to update in your configuration.
|
|
398
|
+
This tells the builder to expect and load your provided components array as the initial content.
|
|
396
399
|
|
|
397
400
|
```vue
|
|
398
401
|
<script setup>
|
|
@@ -409,17 +412,15 @@ const configPageBuilder = {
|
|
|
409
412
|
const pageBuilderService = getPageBuilder()
|
|
410
413
|
|
|
411
414
|
// Load existing components into the builder (title is optional)
|
|
412
|
-
const myArticle =
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
],
|
|
418
|
-
}
|
|
415
|
+
const myArticle = [
|
|
416
|
+
{ html_code: '<section>...</section>', title: 'Header H2' },
|
|
417
|
+
{ html_code: '<section>...</section>', title: 'Text' },
|
|
418
|
+
{ html_code: '<section>...</section>', title: 'Image' },
|
|
419
|
+
]
|
|
419
420
|
|
|
420
421
|
const result = await pageBuilderService.startBuilder(configPageBuilder, myArticle)
|
|
421
422
|
|
|
422
|
-
console.
|
|
423
|
+
console.info('You may inspect this result for message, status, or error:', result)
|
|
423
424
|
</script>
|
|
424
425
|
|
|
425
426
|
<template>
|
|
@@ -430,19 +431,6 @@ console.log('You may inspect this result for message, status, or error:', result
|
|
|
430
431
|
> **Note:**
|
|
431
432
|
> Each component’s `html_code` must be wrapped in a `<section>...</section>` tag.
|
|
432
433
|
> This is how the Page Builder defines and separates individual components.
|
|
433
|
-
>
|
|
434
|
-
> **Example:**
|
|
435
|
-
>
|
|
436
|
-
> ```json
|
|
437
|
-
> {
|
|
438
|
-
> "components": [
|
|
439
|
-
> {
|
|
440
|
-
> "html_code": "<section><div>My content</div></section>",
|
|
441
|
-
> "title": "Header"
|
|
442
|
-
> }
|
|
443
|
-
> ]
|
|
444
|
-
> }
|
|
445
|
-
> ```
|
|
446
434
|
|
|
447
435
|
This approach ensures your users can seamlessly load and edit previously published content, providing a smooth and reliable editing.
|
|
448
436
|
|
|
@@ -469,7 +457,7 @@ const configPageBuilder = {
|
|
|
469
457
|
|
|
470
458
|
const result = await pageBuilderService.startBuilder(configPageBuilder)
|
|
471
459
|
|
|
472
|
-
console.
|
|
460
|
+
console.info('You may inspect this result for message, status, or error:', result)
|
|
473
461
|
</script>
|
|
474
462
|
|
|
475
463
|
<template>
|