@myissue/vue-website-page-builder 3.3.1 → 3.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "v3.3.1",
+  "version": "v3.3.12",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

package/src/Components/PageBuilder/EditorMenu/Editables/ComponentTopMenu.vue

@@ -19,7 +19,7 @@ const secondModalButtonFunctionDynamicModalBuilder = ref(null)
 const thirdModalButtonFunctionDynamicModalBuilder = ref(null)
 
 // remove component
-const deleteSelectedComponent = function () {
+const handleDelete = function () {
   showModalDeleteComponent.value = true
   typeModal.value = 'delete'
   gridColumnModal.value = 2
@@ -35,8 +35,8 @@ const deleteSelectedComponent = function () {
   }
   //
   // handle click
-  thirdModalButtonFunctionDynamicModalBuilder.value = function () {
-    pageBuilderService.deleteSelectedComponent()
+  thirdModalButtonFunctionDynamicModalBuilder.value = async function () {
+    await pageBuilderService.deleteComponentFromDOM()
 
     showModalDeleteComponent.value = false
   }
@@ -64,7 +64,7 @@ const deleteSelectedComponent = function () {
   <div class="pbx-flex pbx-flex-col pbx-items-center pbx-justify-center pbx-myPrimaryGap">
     <div class="pbx-flex pbx-gap-2 pbx-items-center pbx-justify-center">
       <div
-        @click="deleteSelectedComponent()"
+        @click="handleDelete()"
         class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryErrorColor hover:pbx-text-white pbx-text-myPrimaryErrorColor"
       >
         <span class="material-symbols-outlined"> delete_forever </span>

package/src/Components/PageBuilder/EditorMenu/Editables/DeleteElement.vue

@@ -20,7 +20,7 @@ const getRestoredElement = computed(() => {
       <div class="pbx-my-2">
         <button
           v-if="getRestoredElement !== null"
-          @click="pageBuilderService.handleRestoreElement"
+          @click="pageBuilderService.restoreDeletedElementToDOM"
           type="button"
           class="pbx-myPrimaryButton pbx-gap-2 pbx-items-center pbx-w-full"
         >
@@ -29,7 +29,7 @@ const getRestoredElement = computed(() => {
         </button>
         <button
           v-if="getRestoredElement === null"
-          @click="pageBuilderService.handleDeleteElement"
+          @click="pageBuilderService.deleteElementFromDOM"
           type="button"
           class="pbx-myPrimaryDeleteButton pbx-gap-2 pbx-items-center pbx-w-full"
         >

package/src/Components/PageBuilder/EditorMenu/Editables/ElementEditor.vue

@@ -29,7 +29,7 @@ const getRestoredElement = computed(() => {
           <label class="pbx-myPrimaryInputLabel"> Restore the last deleted HTML element.</label>
           <div class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
             <button
-              @click="pageBuilderService.handleRestoreElement"
+              @click="pageBuilderService.restoreDeletedElementToDOM"
               type="button"
               class="pbx-myPrimaryButton pbx-w-full pbx-mt-4"
             >
@@ -48,7 +48,7 @@ const getRestoredElement = computed(() => {
 
         <div class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
           <button
-            @click="pageBuilderService.handleDeleteElement"
+            @click="pageBuilderService.deleteElementFromDOM"
             type="button"
             class="pbx-myPrimaryDeleteButton pbx-w-full pbx-mt-4"
           >

package/src/Components/PageBuilder/EditorMenu/EditorAccordion.vue

@@ -17,7 +17,7 @@
     </div>
     <div
       :class="[expanded ? 'pbx-block' : 'pbx-hidden']"
-      class="pbx-px-4 pbx-ease-linear pbx-duration-75"
+      class="pbx-px-4 pbx-ease-linear pbx-duration-75 pbx-pb-8"
     >
       <slot name="content" />
     </div>

package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue

@@ -35,7 +35,7 @@ const firstModalButtonFunctionDynamicModalBuilder = ref(null)
 const secondModalButtonFunctionDynamicModalBuilder = ref(null)
 const thirdModalButtonFunctionDynamicModalBuilder = ref(null)
 
-const deleteAllComponents = function () {
+const deleteAllComponentsFromDOM = function () {
   showModalDeleteAllComponents.value = true
   typeModal.value = 'delete'
   gridColumnModal.value = 2
@@ -53,9 +53,9 @@ const deleteAllComponents = function () {
   // handle click
   thirdModalButtonFunctionDynamicModalBuilder.value = async function () {
     isDeletingLayout.value = true
-    pageBuilderService.deleteAllComponents()
+    pageBuilderService.deleteAllComponentsFromDOM()
     await pageBuilderService.clearHtmlSelection()
-    await pageBuilderService.removeItemComponentsLocalStorage()
+    await pageBuilderService.removeCurrentComponentsFromLocalStorage()
 
     await delay(500)
     showModalDeleteAllComponents.value = false
@@ -188,7 +188,7 @@ const openHTMLSettings = function () {
 
             <!-- Delete Layout Start -->
             <button
-              @click="deleteAllComponents"
+              @click="deleteAllComponentsFromDOM"
               class="pbx-cursor-pointer lg:pbx-flex pbx-myPrimaryTag pbx-font-normal pbx-w-max pbx-border-none pbx-m-0 pbx-bg-myPrimaryErrorColor pbx-text-white"
               type="button"
             >

package/src/DemoComponents/HomeSection.vue

@@ -82,8 +82,9 @@ const configPageBuilder = {
 } as const
 
 onMounted(async () => {
-  await pageBuilderService.startBuilder(configPageBuilder)
-  await pageBuilderService.mountComponentsToDOM(JSON.stringify(html))
+  const error = await pageBuilderService.startBuilder(configPageBuilder)
+  console.log('show returned page builder error:', error)
+  // await pageBuilderService.mountComponentsToDOM(JSON.stringify(html))
   // await pageBuilderService.mountComponentsToDOM(JSON.stringify(oldhtmlfromdb))
   // await pageBuilderService.mountComponentsToDOM(rawHTML)
 })

package/src/PageBuilder/PageBuilder.vue

@@ -260,10 +260,8 @@ const ensureBuilderInitialized = function () {
 }
 
 onMounted(async () => {
-  // Try to mount any pending data if #pagebuilder is now present
-  if (pageBuilderService.statuspendingMountData()) {
-    await pageBuilderService.tryMountPendingData()
-  }
+  await pageBuilderService.ensureBuilderInitializedForCreate()
+  await pageBuilderService.ensureBuilderInitializedForUpdate()
 
   // Check if Builder started
   await delay(10000)
@@ -277,7 +275,6 @@ onMounted(async () => {
 
 <template>
   <div
-    id="builder-container"
     class="pbx-font-sans pbx-max-w-full pbx-m-1 pbx-border pbx-border-gray-400 pbx-inset-x-0 pbx-z-10 pbx-bg-white pbx-overflow-x-scroll"
   >
     <div id="pagebuilder-top-area" class="lg:pbx-px-4 pbx-pt-2 pbx-pb-4 pbx-mx-4 pbx-mb-4 pbx-mt-2">
@@ -623,7 +620,7 @@ onMounted(async () => {
                   <button
                     @click="
                       () => {
-                        pageBuilderStateStore.setComponentArrayAddMethod('push')
+                        pageBuilderStateStore.setComponentArrayAddMethod('unshift')
                         handleAddComponent()
                       }
                     "