@myissue/vue-website-page-builder 3.2.67 → 3.2.69

package/README.md

@@ -8,6 +8,13 @@
 
 A Vue 3 page builder component with drag & drop functionality for creating dynamic web pages.
 
+Tailored for Vue Developers
+If you're a Vue 3 developer, this builder feels right at home. It installs quickly via npm and supports full customization through props and configuration objects. You can even set specific user settings like image, name, theme, language, and autosave preferences, making it a personalized experience for every user.
+
+Integration is easy, and content is safely auto stored in the browser's local storage. You can retrieve HTML content when you're ready to publish, giving you total control over content output.
+
+Want to include your company logo in the editor toolbar or reflect your brand's color scheme throughout the builder interface? Done. With robust configuration options, branding the builder to match your product or client identity is quick and effortless.
+
 ## Installation
 
 The web builder for stunning pages. Enable users to design and publish modern pages at any scale.
@@ -54,6 +61,7 @@ The Page Builder is packed with features:
 - **Reordering**: Change the order of your content without hassle.
 - **True Visual Editing**: See your changes in real-time as you make them.
 - **Media Library**: Access and manage your media files.
+- **Local Storage & Auto-Save**: Never lose your work - changes are saved as you go.
 - **Unsplash**: Unsplash Integration.
 - **Responsive Editing**: Ensure your site looks great on all devices.
 - **Text Editing:** Edit text content live and in real-time.
@@ -251,6 +259,21 @@ To use the builder’s saved data in your form submission, you may want both the
 
 You should call this logic when you want to submit or save the builder’s output, for example, when the user clicks a “Save” or “Publish” button. The code safely parses the local storage data, handles errors, and assigns the results to your form fields.
 
+**Important:**
+To retrieve the correct content from local storage, you must pass the same resourceData (such as formType and formName) to the Page Builder that was used when the content was originally saved. If the resource data does not match, the Page Builder will look for a different local storage key and may not find the expected content.
+Example:
+
+```js
+const configPageBuilder = {
+  updateOrCreate: {
+    formType: 'create',
+    formName: 'article',
+  },
+}
+```
+
+Example Getting HTML Content from Local Storage for Form Submission
+
 ```js
 <script setup>
 import {
@@ -264,12 +287,23 @@ import "@myissue/vue-website-page-builder/style.css";
 const pageBuilderStateStore = sharedPageBuilderStore;
 const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore);
 
+
+const configPageBuilder = {
+  updateOrCreate: {
+    formType: 'create',
+    formName: 'article',
+  },
+};
+
+pageBuilderClass.setConfigPageBuilder(configPageBuilder);
+
+
 let storedComponents = pageBuilderClass.areComponentsStoredInLocalStorage();
-let content = "";
+let contentFromPageBuilder = "";
 
 try {
     storedComponents = JSON.parse(storedComponents);
-    content = Array.isArray(storedComponents)
+    contentFromPageBuilder = Array.isArray(storedComponents)
         ? storedComponents.map((component) => component.html_code).join("")
         : "";
 } catch (e) {
@@ -277,13 +311,84 @@ try {
         "Unable to parse storedComponents from localStorage:",
         e
     );
-    content = "";
+    contentFromPageBuilder = "";
 } finally {
-    postForm.content = content;
+    yourForm.content = contentFromPageBuilder;
 }
 <script>
 ```
 
+#### Resetting the Builder After Successful Resource Creation
+
+After you have successfully created a new resource (such as a post, article, or listing) using the Page Builder with formType: 'create', it is important to clear the builder’s draft state and remove the corresponding local storage entry. This ensures that old drafts do not appear the next time the builder is opened for a new resource.
+
+Always call these methods after a successful post or resource creation to ensure users start with a fresh builder the next time they create a new resource.
+
+```js
+<script setup>
+import {
+    PageBuilder,
+    PageBuilderClass,
+    sharedPageBuilderStore,
+} from "@myissue/vue-website-page-builder";
+import "@myissue/vue-website-page-builder/style.css";
+
+// Make sure to initialize these before using
+const pageBuilderStateStore = sharedPageBuilderStore;
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore);
+
+
+const configPageBuilder = {
+  updateOrCreate: {
+    formType: 'create',
+    formName: 'article',
+  },
+};
+
+pageBuilderClass.setConfigPageBuilder(configPageBuilder);
+
+const createResource = async function(){
+pageBuilderClass.deleteAllComponents();
+await pageBuilderClass.removeItemComponentsLocalStorage();
+};
+<script>
+```
+
+#### Resetting the Builder After Successful Resource Update
+
+After you have successfully updated an existing resource (such as a post, article, or listing) using the Page Builder with formType: 'update', you should clear the builder’s state and remove the corresponding local storage entry. This prevents outdated drafts from being loaded the next time you edit the same resource.
+
+```js
+<script setup>
+import {
+    PageBuilder,
+    PageBuilderClass,
+    sharedPageBuilderStore,
+} from "@myissue/vue-website-page-builder";
+import "@myissue/vue-website-page-builder/style.css";
+
+// Make sure to initialize these before using
+const pageBuilderStateStore = sharedPageBuilderStore;
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore);
+
+
+const configPageBuilder = {
+  updateOrCreate: {
+    formType: 'update',
+    formName: 'article',
+  },
+};
+
+pageBuilderClass.setConfigPageBuilder(configPageBuilder);
+
+const updateResource = async function() {
+  pageBuilderClass.deleteAllComponents();
+  await pageBuilderClass.removeItemComponentsLocalStorage();
+};
+
+<script>
+```
+
 #### 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:

package/dist/vue-website-page-builder.js

@@ -1478,11 +1478,11 @@ class Se {
   async saveComponentsLocalStorage() {
     await this.nextTick, await Go(this, Os).call(this);
   }
-  async removeItemComponentsLocalStorageCreate() {
+  async removeItemComponentsLocalStorage() {
     await this.nextTick, this.getLocalStorageItemName.value && localStorage.removeItem(this.getLocalStorageItemName.value);
   }
-  async removeItemComponentsLocalStorageUpdate() {
-    this.getLocalStorageItemName.value && localStorage.removeItem(this.getLocalStorageItemName.value);
+  getStorageItemNameForResource() {
+    return this.getLocalStorageItemName.value;
   }
   areComponentsStoredInLocalStorage() {
     if (!this.getLocalStorageItemName.value) return !1;
@@ -23000,7 +23000,7 @@ const k3 = ["src"], S3 = {
 }, Xk = { class: "overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg" }, Zk = { class: "overflow-x-auto" }, e6 = { class: "w-max" }, t6 = { class: "bg-white divide-y divide-gray-200" }, r6 = { class: "px-6 py-4 whitespace-nowrap text-sm text-gray-500" }, o6 = { class: "min-w-[30rem] w-max" }, n6 = { key: 0 }, i6 = { key: 1 }, s6 = { key: 0 }, a6 = { class: "px-6 py-4 whitespace-nowrap text-sm text-gray-500" }, l6 = { class: "min-w-[30rem] w-max" }, d6 = { class: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium" }, c6 = { class: "mt-4 mb-4 py-8 border-b border-myPrimbryLightGrayColor" }, p6 = { class: "mt-4 whitespace-pre-wrap text-white overflow-hidden bg-gray-900" }, u6 = { class: "px-4 pb-8 pt-4 text-white text-xs break-all" }, m6 = { class: "myPrimaryParagraph text-xs text-white" }, h6 = {
   __name: "PageBuilderSettings",
   setup(r) {
-    const e = "v3.2.67", t = be;
+    const e = "v3.2.69", t = be;
     new Se(t);
     const o = O(null), n = $(() => t.getConfigPageBuilder), i = $(() => t.getComponents), s = function(l, d) {
       const c = document.createElement("a");
@@ -23620,7 +23620,7 @@ const k3 = ["src"], S3 = {
       n.value = !0, i.value = "delete", s.value = 2, a.value = "Remove all Components", l.value = "Are you sure you want to remove all Components?", d.value = "Close", c.value = null, p.value = "Delete", m.value = function() {
         n.value = !1;
       }, g.value = async function() {
-        o.deleteAllComponents(), await o.clearHtmlSelection(), t.value.updateOrCreate && typeof t.value.updateOrCreate.formType == "string" && (t.value.updateOrCreate.formType === "create" && await o.removeItemComponentsLocalStorageCreate(), t.value.updateOrCreate.formType === "update" && await o.removeItemComponentsLocalStorageUpdate()), n.value = !1;
+        o.deleteAllComponents(), await o.clearHtmlSelection(), t.value.updateOrCreate && typeof t.value.updateOrCreate.formType == "string" && (t.value.updateOrCreate.formType === "create" && await o.removeItemComponentsLocalStorage(), t.value.updateOrCreate.formType === "update" && await o.removeItemComponentsLocalStorage()), n.value = !1;
       };
     }, b = O(!1), w = function() {
       b.value = !1;