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

package/README.md

@@ -1,5 +1,5 @@
 <p align="center" dir="auto">
-<img width="200" style="max-width: 100%;" src="./public/logo/logo.svg" alt="Logo" />
+<img width="200" style="max-width: 100%;" src="./public/logo/logo.svg" alt="Vue Website Page Builder Logo" />
 </p>
 
 ## **DEVELOPMENT VERSION - NOT READY FOR PRODUCTION**
@@ -43,10 +43,10 @@ create and enhance digital experiences with Vue on any backend.
 
 ## About
 
-<img style="max-width: 100%;" src="./public/home/builder3.jpg" alt="Logo" />
-
 A Page Builder designed for growth. Build your website pages with ready-made components that are fully customizable and always responsive, designed to fit every need. A powerful Page Builder for growing merchants, brands, and agencies.
 
+<img style="max-width: 100%;" src="./public/home/builder3.jpg" alt="Vue Website Page Builder" />
+
 ## Features
 
 Includes:
@@ -251,18 +251,110 @@ Configuration Options
 
 ---
 
-### Updating Existing Resources
+### Local Storage
 
-To load existing content that was created with this PageBuilder:
+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.
 
-- Use `sharedPageBuilderStore` to ensure the external PageBuilderClass and internal PageBuilder component share the same state
-- Import `PageBuilderClass` which contains all methods to manipulate and control the page builder state - in this case we need the `loadExistingContent()` method to load existing content into the page builder
-- The PageBuilderClass uses the shared store to maintain state consistency between external operations and the internal PageBuilder component, ensuring that when you load content externally it appears correctly in the PageBuilder interface
+- **Auto-Save:** The builder periodically auto-saves your changes to local storage, so you don't have to worry about losing your work.
+- **Manual Save:** When the user clicks the Save button, the current state is also saved to local storage.
+
+#### Resource-Specific Storage Keys
+
+Each save is stored in local storage using a unique key. The key is determined by whether you are creating a new resource or updating an existing one:
+
+- **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`:
+
+```js
+<script setup>
+import {
+  PageBuilder,
+  PageBuilderClass,
+  sharedPageBuilderStore,
+} from '@myissue/vue-website-page-builder'
+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',
+  },
+  // ...other config options
+}
+
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
+
+// Initializing page builder with essential configuration
+pageBuilderClass.setConfigPageBuilder(configPageBuilder)
+// Populating page builder with existing resource content
+pageBuilderClass.loadExistingContent(existingResourceFromBackend)
+
+
+<template>
+  <PageBuilder />
+</template>
+```
+
+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.
+
+### Restoring Unfinished Drafts for New Resources
+
+If a user started creating a new resource but hasn't finished (e.g., they want to continue the next day), you can restore their draft from local storage:
+
+- Set `formType` to `"create"` in your config object.
+- The PageBuilder will automatically look for any saved draft in local storage (based on the resource type) and load it if available.
+
+**Example: Set `formType` to "create" for continuing a new resource draft**
+
+```js
+<script setup>
+import {
+  PageBuilder,
+  PageBuilderClass,
+  sharedPageBuilderStore,
+} from '@myissue/vue-website-page-builder'
+import '@myissue/vue-website-page-builder/style.css'
+
+const pageBuilderStateStore = sharedPageBuilderStore
+
+const configPageBuilder = {
+  updateOrCreate: {
+    formType: 'create',
+    createNewResourceFormName: 'article',
+  },
+}
+
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
+
+// Initializing page builder with essential configuration
+pageBuilderClass.setConfigPageBuilder(configPageBuilder)
+// No need to call loadExistingContent; the builder will auto-restore from local storage if available
+</script>
+
+<template>
+  <PageBuilder />
+</template>
+```
+
+> **Tip:** Use `formType: 'create'` for new resources and `formType: 'update'` for editing existing resources. This ensures the correct local storage key is used and the right content is loaded.
+
+### Loading Published Content from the Backend into the Page Builder
+
+To load existing content that was created with this PageBuilder from any backend:
+
+- Use `sharedPageBuilderStore` to ensure the external `PageBuilderClass` and internal `PageBuilder` component share the same state.
+- Import `PageBuilderClass` which contains all methods to manipulate and control the page builder state. Use the `loadExistingContent()` method to load existing content into the page builder.
+- The `PageBuilderClass` uses the shared store to maintain state consistency between external operations and the internal `PageBuilder` component, ensuring that when you load content externally it appears correctly in the PageBuilder interface.
 - Set `formType` to `"update"` in your config object and pass it to the PageBuilder using `pageBuilderClass.setConfigPageBuilder(configPageBuilder)`. This tells the PageBuilder that you're editing an existing resource rather than creating a new one, which affects how the component handles data and interactions.
 
-  **Set formType to "update"** in template:
+**Example: Set `formType` to "update" for editing an existing resource**
 
-```javascript
+```js
 <script setup>
 import {
   PageBuilder,
@@ -271,18 +363,20 @@ import {
 } from '@myissue/vue-website-page-builder'
 import '@myissue/vue-website-page-builder/style.css'
 
+const pageBuilderStateStore = sharedPageBuilderStore
+
 const configPageBuilder = {
   updateOrCreate: {
     formType: 'update',
+    createNewResourceFormName: 'article',
   },
 }
 
-// Use sharedPageBuilderStore for shared state between PageBuilderClass and PageBuilder component
 const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
 // Initializing page builder with essential configuration
 pageBuilderClass.setConfigPageBuilder(configPageBuilder)
-// Populating page builder with existing resource content
+// Populating page builder with existing resource content from backend
 pageBuilderClass.loadExistingContent(existingResourceFromBackend)
 </script>
 
@@ -291,6 +385,8 @@ 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.  
@@ -366,12 +462,12 @@ Example integration:
 ```javascript
 <script setup>
 import { PageBuilder } from '@myissue/vue-website-page-builder'
-import MediaLibraryComponent from './ComponentsPageBuilder/MediaLibraryComponent.vue'
-import SearchComponent from './ComponentsPageBuilder/SearchComponent.vue'
+import YourMediaLibraryComponent from './ComponentsPageBuilder/YourMediaLibraryComponent.vue'
+import YourSearchComponent from './ComponentsPageBuilder/YourSearchComponent.vue'
 </script>
 
 <template>
-  <PageBuilder :MediaLibraryComponent="MediaLibraryComponent" :SearchComponent="SearchComponent" />
+  <PageBuilder :CustomMediaLibraryComponent="YourMediaLibraryComponent" :CustomSearchComponent="YourSearchComponent" />
 </template>
 ```