@myissue/vue-website-page-builder 3.4.17 → 3.4.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.4.17",
+  "version": "3.4.18",
   "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/BackgroundColorEditor.vue

@@ -61,7 +61,7 @@ watch(
 
         <ListboxButton
           v-if="!globalPageLayout"
-          class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+          class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
         >
           <div class="pbx-flex pbx-flex-col">
             <div class="pbx-flex pbx-gap-2 pbx-items-center">

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

@@ -188,6 +188,8 @@ const handleModalIframeSrc = function () {
     showModalIframeSrc.value = false
   }
 }
+
+const openOptionsMoreOpen = ref(false)
 </script>
 <template v-if="getElement">
   <div>
@@ -264,88 +266,148 @@ const handleModalIframeSrc = function () {
     >
     </MediaLibraryModal>
 
-    <p v-if="false" class="pbx-font-medium pbx-text-[10px] pbx-w-max lg:pbx-block pbx-hidden">
-      Editing
-      <span class="pbx-lowercase">&lt;{{ elementTag }}&gt;</span>
-    </p>
-    <div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2" :class="{ '': getElement }">
-      <template v-if="pageBuilderService.ElOrFirstChildIsIframe()">
-        <div class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
-          <button
-            @click="handleModalIframeSrc"
-            type="button"
-            class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
-          >
-            <span class="material-symbols-outlined"> play_circle </span>
-          </button>
-        </div>
-      </template>
-
-      <template
-        v-if="
-          pageBuilderService.isSelectedElementValidText() &&
-          !pageBuilderService.ElOrFirstChildIsIframe()
-        "
-      >
-        <div class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
-          <button
-            @click="handleModalPreviewTiptap"
-            type="button"
-            class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
-          >
-            <span class="material-symbols-outlined"> edit </span>
-          </button>
-        </div>
-        <TextColorEditor></TextColorEditor>
-      </template>
-
-      <template
-        v-if="
-          getElement &&
-          getComponent &&
-          getBasePrimaryImage &&
-          !pageBuilderService.ElOrFirstChildIsIframe()
-        "
+    <div class="pbx-select-none">
+      <p v-if="false" class="pbx-font-medium pbx-text-[10px] pbx-w-max lg:pbx-block pbx-hidden">
+        Editing
+        <span class="pbx-lowercase">&lt;{{ elementTag }}&gt;</span>
+      </p>
+      <div
+        class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2"
+        :class="{ '': getElement }"
       >
-        <div class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
+        <template v-if="pageBuilderService.ElOrFirstChildIsIframe()">
+          <div class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
+            <button
+              @click="handleModalIframeSrc"
+              type="button"
+              class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+            >
+              <span class="material-symbols-outlined"> play_circle </span>
+            </button>
+          </div>
+        </template>
+
+        <template
+          v-if="
+            pageBuilderService.isSelectedElementValidText() &&
+            !pageBuilderService.ElOrFirstChildIsIframe()
+          "
+        >
+          <div class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
+            <button
+              @click="handleModalPreviewTiptap"
+              type="button"
+              class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+            >
+              <span class="material-symbols-outlined"> edit </span>
+            </button>
+          </div>
+          <TextColorEditor></TextColorEditor>
+        </template>
+
+        <template
+          v-if="
+            getElement &&
+            getComponent &&
+            getBasePrimaryImage &&
+            !pageBuilderService.ElOrFirstChildIsIframe()
+          "
+        >
+          <div class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
+            <button
+              @click="handleAddImage"
+              type="button"
+              class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+            >
+              <span class="material-symbols-outlined"> add_photo_alternate </span>
+            </button>
+          </div>
+        </template>
+
+        <template
+          v-if="
+            getElement &&
+            getElement.nodeType === 1 &&
+            !getBasePrimaryImage &&
+            !pageBuilderService.ElOrFirstChildIsIframe()
+          "
+        >
+          <BackgroundColorEditor></BackgroundColorEditor>
+        </template>
+
+        <template v-if="getElement">
           <button
-            @click="handleAddImage"
+            @click="pageBuilderService.deleteElementFromDOM"
             type="button"
-            class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+            class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
           >
-            <span class="material-symbols-outlined"> add_photo_alternate </span>
+            <span class="material-symbols-outlined"> delete </span>
           </button>
+        </template>
+
+        <div
+          v-if="getElement && getComponent"
+          class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+          @click="openOptionsMoreOpen = !openOptionsMoreOpen"
+        >
+          <span class="material-symbols-outlined"> more_horiz </span>
         </div>
-      </template>
-
-      <template
-        v-if="
-          getElement &&
-          getElement.nodeType === 1 &&
-          !getBasePrimaryImage &&
-          !pageBuilderService.ElOrFirstChildIsIframe()
-        "
-      >
-        <BackgroundColorEditor></BackgroundColorEditor>
-      </template>
-
-      <template v-if="getElement">
-        <button
-          @click="pageBuilderService.deleteElementFromDOM"
-          type="button"
-          class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+        <div
+          v-if="getElement && getComponent"
+          class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+          @click="pageBuilderService.clearHtmlSelection()"
         >
-          <span class="material-symbols-outlined"> delete </span>
-        </button>
-      </template>
+          <span class="material-symbols-outlined"> close_small</span>
+        </div>
+      </div>
+    </div>
 
+    <transition name="popup-fade">
       <div
-        v-if="getElement && getComponent"
-        class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
-        @click="pageBuilderService.clearHtmlSelection()"
+        v-if="openOptionsMoreOpen"
+        class="pbx-fixed pbx-z-40 pbx-top-10 pbx-right-0 lg:pbx-w-72 md:pbx-w-64 pbx-w-full pbx-select-none"
       >
-        <span class="material-symbols-outlined"> close</span>
+        <div
+          class="pbx-rounded-3xl pbx-border pbx-border-gray-100 pbx-bg-white pbx-shadow-lg pbx-pt-4 pbx-pb-4 pbx-flex pbx-flex-col pbx-overflow-y-auto pbx-max-h-[80vh] pbx-mx-4 pbx-px-2"
+        >
+          <div
+            class="pbx-flex pbx-gap-2 pbx-items-center pbx-justify-between pbx-border-b pbx-border-gray-200 pbx-pb-4 pbx-pl-2"
+          >
+            <span class="pbx-text-black pbx-font-medium">Options</span>
+
+            <!-- Close Modal start -->
+            <div
+              @click="openOptionsMoreOpen = !openOptionsMoreOpen"
+              class="pbx-h-8 pbx-w-8 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-black pbx-text-white pbx-aspect-square hover:pbx-fill-white focus-visible:pbx-ring-0 hover:pbx-outline-3 hover:pbx-outline-offset-2 hover:pbx-outline-black pbx-transition-all pbx-duration-100"
+            >
+              <span class="material-symbols-outlined"> close_small </span>
+            </div>
+            <!-- Close Modal Start -->
+          </div>
+
+          <div class="pbx-flex pbx-flex-col pbx-gap-4 pbx-mt-6">
+            <!-- content start -->
+            <div
+              v-if="getElement && getComponent"
+              @click="
+                () => {
+                  openOptionsMoreOpen = !openOptionsMoreOpen
+                  pageBuilderService.duplicateComponent()
+                }
+              "
+              class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-cursor-pointer"
+            >
+              <div
+                class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+              >
+                <span class="material-symbols-outlined"> control_point_duplicate </span>
+              </div>
+              <div class="pbx-text-sm">Duplicate component</div>
+            </div>
+            <!-- content end -->
+          </div>
+        </div>
       </div>
-    </div>
+    </transition>
   </div>
 </template>

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

@@ -63,7 +63,7 @@ watch(
 
         <ListboxButton
           v-if="!globalPageLayout"
-          class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+          class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
         >
           <div class="pbx-flex pbx-flex-col">
             <div class="pbx-flex pbx-gap-2 pbx-items-center">

package/src/PageBuilder/PageBuilder.vue

@@ -869,7 +869,7 @@ onMounted(async () => {
       >
         <div
           id="pbxEditToolbar"
-          class="pbx-z-30 lg:pbx-mx-20 pbx-flex pbx-gap-2 pbx-justify-center pbx-items-center pbx-rounded pbx-px-4 pbx-bg-red-200 pbx-h-0"
+          class="pbx-z-30 lg:pbx-mx-20 pbx-flex pbx-gap-2 pbx-justify-center pbx-items-center pbx-rounded-full pbx-px-4 pbx-h-0"
         >
           <template v-if="getElement">
             <EditGetElement></EditGetElement>

package/src/css/dev-global.css

@@ -5,3 +5,20 @@ These styles affect all HTML elements (like input, button, h1, etc.) in the cons
 .mobile-preview-frame {
   container-type: inline-size;
 }
+
+/* popover start */
+.popup-fade-enter-active,
+.popup-fade-leave-active {
+  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.popup-fade-enter-from,
+.popup-fade-leave-to {
+  transform: scale(0.95);
+  opacity: 0;
+}
+.popup-fade-enter-to,
+.popup-fade-leave-from {
+  transform: scale(1);
+  opacity: 1;
+}
+/* popover end */

package/src/css/style.css

@@ -367,9 +367,12 @@
   min-width: 4rem;
   padding-right: 1rem;
   padding-left: 1rem;
-  height: 2rem;
-  box-shadow: 0 0 0 10px oklch(86.9% 0.005 56.366);
-  background: oklch(86.9% 0.005 56.366);
+  height: 1.5rem;
+  background: #fff; /* white background */
+  /* white outline first, then black border simulated as shadow */
+  box-shadow:
+    0 0 0 10px #fff,
+    /* white outline */ 0 0 0 12px #000; /* black border outside */
 }
 
 /* CSS for content inside page builder # start */

package/src/services/PageBuilderService.ts

@@ -804,18 +804,19 @@ export class PageBuilderService {
     ) {
       const heading = element.children[0] as HTMLElement
 
-      element.classList.forEach((cls) => {
-        if (this.fontSizeRegex.test(cls)) {
-          element.classList.remove(cls)
-        }
-      })
+      // Only add default font size classes if none exist
+      const hasFontSizeClass = Array.from(element.classList).some((cls) =>
+        this.fontSizeRegex.test(cls),
+      )
 
-      // Apply responsive font size classes based on heading type
-      if (heading.tagName === 'H2') {
-        element.classList.add('pbx-text-2xl', 'lg:pbx-text-4xl', 'pbx-font-medium')
-      }
-      if (heading.tagName === 'H3') {
-        element.classList.add('pbx-text-1xl', 'lg:pbx-text-3xl', 'pbx-font-medium')
+      if (!hasFontSizeClass) {
+        // Apply responsive font size classes based on heading type
+        if (heading.tagName === 'H2') {
+          element.classList.add('pbx-text-2xl', 'lg:pbx-text-4xl', 'pbx-font-medium')
+        }
+        if (heading.tagName === 'H3') {
+          element.classList.add('pbx-text-1xl', 'lg:pbx-text-3xl', 'pbx-font-medium')
+        }
       }
     }
   }
@@ -1508,6 +1509,49 @@ export class PageBuilderService {
     return !this.hasVisibleContent(section)
   }
 
+  /**
+   * Duplicate the currently selected component from the DOM and the state.
+   * @returns {Promise<void>}
+   */
+  public async duplicateComponent() {
+    // Sync latest DOM changes to the store
+    this.syncDomToStoreOnly()
+    await nextTick()
+
+    const components = this.pageBuilderStateStore.getComponents
+    const selectedComponent = this.getComponent.value
+
+    if (!components || !selectedComponent) return
+
+    // Find the index of the selected component
+    const index = components.findIndex(
+      (component: ComponentObject) => component.id === selectedComponent.id,
+    )
+    if (index === -1) return
+
+    // Clone the component and generate a new id
+    const clonedComponent = this.cloneCompObjForDOMInsertion(components[index])
+
+    // Insert the cloned component right after the selected one
+    const newComponents = [
+      ...components.slice(0, index + 1),
+      clonedComponent,
+      ...components.slice(index + 1),
+    ]
+
+    this.pageBuilderStateStore.setComponents(newComponents)
+
+    // Wait for DOM update and re-attach listeners
+    await nextTick()
+    await this.addListenersToEditableElements()
+
+    // Optionally, select the new duplicated component
+    this.pageBuilderStateStore.setComponent(clonedComponent)
+    this.pageBuilderStateStore.setElement(null)
+
+    // Auto-save after duplication
+    await this.handleAutoSave()
+  }
   /**
    * Deletes the currently selected component from the DOM and the state.
    * @returns {Promise<void>}
@@ -1521,8 +1565,8 @@ export class PageBuilderService {
     if (!components) return
 
     // Find the index of the component to be deleted.
-    const indexToDelete = components.findIndex(
-      (component: ComponentObject) => component.id === this.getComponent.value?.id,
+    const indexToDelete = components.findIndex((component: ComponentObject) =>
+      this.getComponent.value ? component.id === this.getComponent.value.id : false,
     )
 
     if (indexToDelete === -1) {
@@ -1538,15 +1582,6 @@ export class PageBuilderService {
 
     this.pageBuilderStateStore.setComponents(newComponents)
 
-    // Remove the component's corresponding section from the DOM.
-    const pagebuilder = document.querySelector('#pagebuilder')
-    if (pagebuilder && this.getComponent.value?.id) {
-      const section = pagebuilder.querySelector(
-        `section[data-componentid="${this.getComponent.value.id}"]`,
-      )
-      if (section) section.remove()
-    }
-
     // Wait for the DOM to update before re-attaching event listeners.
     await nextTick()
     await this.addListenersToEditableElements()