@myissue/vue-website-page-builder 3.2.13 → 3.2.16

package/README.md

@@ -4,7 +4,7 @@
 
 ## **DEVELOPMENT VERSION - NOT READY FOR PRODUCTION**
 
-🚀 **Official Launch Date: June 15, 2025**  
+🚀 **Official Launch Date: June 16, 2025**  
 We're working hard to bring you a production-ready page builder. Stay tuned for updates!
 
 You are welcome to test the builder and report any bugs or feedback before the official launch date.  
@@ -76,12 +76,8 @@ agencies. Empower users to create the perfect content with the Page Builder.
 - **Technologies**: This Page Builder is developed using TypeScript, Vue 3, the Composition API, Pinia, CSS, Tailwind CSS, and HTML.
 - **Features**: Click & Drop Page Builder.
 
----
-
 ## Documentation
 
----
-
 ### Requirements
 
 Please note that these instructions assume you have Node.js installed.
@@ -90,8 +86,6 @@ Please note that these instructions assume you have Node.js installed.
 - Vue.js ≥ 3.0.0
 - Modern browser with ES6+ support
 
----
-
 ### Getting started & installation
 
 Make sure to install the dependencies:
@@ -110,8 +104,6 @@ yarn install
 bun install
 ```
 
----
-
 ### Important: CSS Import Required
 
 The Page Builder requires its CSS file to be imported for proper styling and automatic icon loading:
@@ -127,8 +119,6 @@ This import automatically includes:
 - ✅ Google Material Icons (no additional setup needed)
 - ✅ Responsive design utilities
 
----
-
 ### Quick Start
 
 Get up and running quickly and initializing the builder in your Vue project. The following example demonstrates the minimal setup required to start building pages.
@@ -146,8 +136,6 @@ import '@myissue/vue-website-page-builder/style.css'
 </template>
 ```
 
----
-
 ### Optional: Provide Config to PageBuilder
 
 Get up and running quickly by importing the PageBuilder component, setting up your configuration, and initializing the builder in your Vue project. The following example demonstrates the minimal setup required to start building pages with your own config and logo.
@@ -157,7 +145,8 @@ Get up and running quickly by importing the PageBuilder component, setting up yo
   - `pageBuilderLogo` to display your company logo in the builder toolbar
   - `resourceData` to prefill the builder with initial data
   - `userSettings` to set user preferences such as theme, language, or autoSave
-  - `createNewResourceFormName` (recommended): Specify the resource type (e.g., `"article"`, `"jobPost"`, `"store"`, etc.) in the `updateOrCreate` config. This is especially useful if your platform supports multiple resource types. By providing a unique name, the Page Builder can correctly manage layouts and local storage for each resource type, allowing users to continue where they left off for different resources.
+  - `brandColor` set brand’s primary color, which will be used for key UI elements in the builder in the `settings` config
+  - `formName` (recommended): Specify the resource type (e.g., `"article"`, `"jobPost"`, `"store"`, etc.) in the `updateOrCreate` config. This is especially useful if your platform supports multiple resource types. By providing a unique name, the Page Builder can correctly manage layouts and local storage for each resource type, allowing users to continue where they left off for different resources.
 
 ```vue
 <script setup>
@@ -171,7 +160,7 @@ import '@myissue/vue-website-page-builder/style.css'
 const configPageBuilder = {
   updateOrCreate: {
     // Set the resource type for better local storage and multi-resource support
-    createNewResourceFormName: 'article',
+    formName: 'article',
   },
   pageBuilderLogo: {
     src: '/logo/logo.svg',
@@ -186,13 +175,16 @@ const configPageBuilder = {
     language: 'en',
     autoSave: true,
   },
+  settings: {
+    brandColor: '#DB93B0',
+  },
 }
 
 // Use sharedPageBuilderStore for shared state between PageBuilderClass and PageBuilder component
 const pageBuilderStateStore = sharedPageBuilderStore
 const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
-// Initializing Page Builder with essential configuration
+// Initializing with essential configuration
 pageBuilderClass.setConfigPageBuilder(configPageBuilder)
 </script>
 
@@ -234,7 +226,7 @@ const configPageBuilder = {
 const pageBuilderStateStore = sharedPageBuilderStore
 const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
-// Initializing page builder with essential configuration
+// Initializing with essential configuration
 pageBuilderClass.setConfigPageBuilder(configPageBuilder)
 </script>
 
@@ -249,8 +241,6 @@ Configuration Options
 | ----------------- | -------- | ------- | ----------------------------------- |
 | `PageBuilderLogo` | `String` | `null`  | URL path to your company logo image |
 
----
-
 ### Local Storage
 
 The Page Builder automatically manages all changes using the browser's local storage. Every change you make—such as adding, editing, or deleting components—is saved in local storage. This ensures that your progress is not lost, even if you accidentally close the browser or navigate away.
@@ -265,7 +255,7 @@ Each save is stored in local storage using a unique key. The key is determined b
 - **New Resource:** The key will be prefixed with `page-builder-create-resource`.
 - **Updating Resource:** The key will be prefixed with `page-builder-update-resource`.
 
-You can further customize and uniquely identify the storage key by providing a `createNewResourceFormName` in your `configPageBuilder`:
+You can further customize and uniquely identify the storage key by providing a `formName` in your `configPageBuilder`:
 
 ```js
 <script setup>
@@ -280,17 +270,19 @@ import '@myissue/vue-website-page-builder/style.css'
 const configPageBuilder = {
   updateOrCreate: {
     // Set the resource type for better local storage and multi-resource support
-    createNewResourceFormName: 'article',
+    formName: 'article',
   },
   // ...other config options
 }
 
 const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
-// Initializing page builder with essential configuration
+// Initializing with essential configuration
 pageBuilderClass.setConfigPageBuilder(configPageBuilder)
 // Populating page builder with existing resource content
 pageBuilderClass.loadExistingContent(existingResourceFromBackend)
+</script>
+
 
 
 <template>
@@ -300,7 +292,7 @@ pageBuilderClass.loadExistingContent(existingResourceFromBackend)
 
 This allows you to manage drafts for multiple resource types (e.g., articles, jobs, stores) independently in local storage.
 
-> **Tip:** The local storage key will automatically include the resource type if `createNewResourceFormName` is provided, ensuring that drafts for different resource types do not overwrite each other.
+> **Tip:** The local storage key will automatically include the resource type if `formName` is provided, ensuring that drafts for different resource types do not overwrite each other.
 
 ### Restoring Unfinished Drafts for New Resources
 
@@ -325,13 +317,13 @@ const pageBuilderStateStore = sharedPageBuilderStore
 const configPageBuilder = {
   updateOrCreate: {
     formType: 'create',
-    createNewResourceFormName: 'article',
+    formName: 'article',
   },
 }
 
 const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
-// Initializing page builder with essential configuration
+// Initializing with essential configuration
 pageBuilderClass.setConfigPageBuilder(configPageBuilder)
 // No need to call loadExistingContent; the builder will auto-restore from local storage if available
 </script>
@@ -368,13 +360,13 @@ const pageBuilderStateStore = sharedPageBuilderStore
 const configPageBuilder = {
   updateOrCreate: {
     formType: 'update',
-    createNewResourceFormName: 'article',
+    formName: 'article',
   },
 }
 
 const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
-// Initializing page builder with essential configuration
+// Initializing with essential configuration
 pageBuilderClass.setConfigPageBuilder(configPageBuilder)
 // Populating page builder with existing resource content from backend
 pageBuilderClass.loadExistingContent(existingResourceFromBackend)
@@ -385,72 +377,17 @@ pageBuilderClass.loadExistingContent(existingResourceFromBackend)
 </template>
 ```
 
----
-
 #### How should `existingResourceFromBackend` look?
 
-When loading an existing resource, each component object will have an `id` assigned by the page builder.  
 The example below shows the structure as it would appear when loaded from local storage after components have been added in the builder.
 
 - Example JSON string (from localStorage or backend)
 - For existing resources, id will always be present and set by the page builder.
 
-TypeScript interface for reference
-
-```javascript
-export interface ComponentObject {
-  id: string | number | null
-  html_code: string
-  title?: string
-}
-```
-
-```javascript
-<script setup>
-// Example JSON string (from localStorage or backend)
-const existingResourceFromBackend = JSON.stringify([
-  {
-    html_code: `<section>
-                  <div>
-                    <h1>Article Title</h1>
-                      <p>Content</p>
-                  </div>
-                </section>`,
-    id: null,
-    title: 'Component Title',
-  },
-  {
-    html_code: `<section>
-                  <div>
-                    <h1>Article Title</h1>
-                      <p>Content</p>
-                  </div>
-                </section>`,
-    id: null,
-    title: 'Component Title',
-  },
-])
-</script>
-
-<template>
-  <PageBuilder />
-</template>
-```
-
-Alternatively, you can provide a raw HTML string containing your `<section>` components:
-
----
-
 ### Customization
 
 Customizing the page builder is made simple since all the logic resides in the PageBuilder Class.
 
-    - Google Fonts (Jost, Cormorant) and Material Icons are automatically loaded when you import the CSS file. No additional setup required for fonts or icons!
-
----
-
----
-
 ### Custom Components
 
 Want to add your own media library or Create custom components that can be injected into the page builder:
@@ -463,18 +400,16 @@ Example integration:
 <script setup>
 import { PageBuilder } from '@myissue/vue-website-page-builder'
 import YourMediaLibraryComponent from './ComponentsPageBuilder/YourMediaLibraryComponent.vue'
-import YourSearchComponent from './ComponentsPageBuilder/YourSearchComponent.vue'
+import YourCustomBuilderComponents from './ComponentsPageBuilder/YourCustomBuilderComponents.vue'
 </script>
 
 <template>
-  <PageBuilder :CustomMediaLibraryComponent="YourMediaLibraryComponent" :CustomSearchComponent="YourSearchComponent" />
+  <PageBuilder :CustomMediaLibraryComponent="YourMediaLibraryComponent" :CustomBuilderComponents="YourCustomBuilderComponents" />
 </template>
 ```
 
 ## Troubleshooting
 
----
-
 ### Fonts or Icons Not Displaying
 
 If fonts (Jost, Cormorant) or Material Icons are not displaying correctly, verify that: