@myissue/vue-website-page-builder 3.3.20 → 3.3.21

package/src/composables/PageBuilderService.ts

@@ -1026,6 +1026,9 @@ export class PageBuilderService {
     const element = this.getElement.value
     if (!element) return
 
+    // Remove 'selected' attribute before deletion
+    element.removeAttribute('selected')
+
     if (!element.parentNode) {
       this.pageBuilderStateStore.setComponent(null)
       this.pageBuilderStateStore.setElement(null)
@@ -1039,15 +1042,18 @@ export class PageBuilderService {
       this.pageBuilderStateStore.setNextSibling(element.nextSibling as HTMLElement | null)
       // Remove only the element itself from the DOM
       element.remove()
-    } else {
-      // If the element's parent is a section, remove the whole component (section)
-      await this.deleteComponentFromDOM()
-      // No need to call element.remove() here, as the section is already removed
     }
 
     // Clear selection state
     this.pageBuilderStateStore.setComponent(null)
     this.pageBuilderStateStore.setElement(null)
+
+    // Deselect any selected or hovered elements in the builder UI
+    await this.clearHtmlSelection()
+    // Wait for Vue to finish DOM updates before attaching event listeners. This ensure elements exist in the DOM.
+    await nextTick()
+    // Attach event listeners to all editable elements in the Builder
+    await this.#addListenersToEditableElements()
   }
 
   async restoreDeletedElementToDOM() {

package/src/css/dev-global.css

@@ -130,3 +130,29 @@ These styles affect all HTML elements (like input, button, h1, etc.) in the cons
   gap: 6px 0px;
   justify-content: center;
 }
+
+/* Hide the panel by default */
+#settingsPanel {
+  opacity: 0;
+  pointer-events: none;
+  /* matches pbx-translate-y-2 */
+  transform: translateY(1rem);
+  transition: all 0.3s ease-out;
+}
+
+/* Show the panel when the parent with [selected] is hovered */
+[selected]:hover #settingsPanel {
+  opacity: 1;
+  pointer-events: auto;
+  /* visible position */
+  transform: translateY(1);
+}
+
+#contains-pagebuilder {
+  position: relative; /* make this the positioning context for absolute children */
+  overflow-y: auto;
+}
+#settingsPanel {
+  position: absolute;
+  /* top and left will be set dynamically */
+}