@myissue/vue-website-page-builder 3.3.95 → 3.3.97

package/package.json

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

@@ -1,6 +1,6 @@
 <script setup>
 import DynamicModalBuilder from '../../../Modals/DynamicModalBuilder.vue'
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { getPageBuilder } from '../../../../composables/builderInstance'
 import { useTranslations } from '../../../../composables/useTranslations'
 
@@ -22,6 +22,9 @@ const firstModalButtonFunctionDynamicModalBuilder = ref(null)
 const secondModalButtonFunctionDynamicModalBuilder = ref(null)
 const thirdModalButtonFunctionDynamicModalBuilder = ref(null)
 
+const canMoveUp = computed(() => pageBuilderService.canMoveUp())
+const canMoveDown = computed(() => pageBuilderService.canMoveDown())
+
 // remove component
 const handleDelete = function () {
   showModalDeleteComponent.value = true
@@ -78,14 +81,26 @@ const handleDelete = function () {
     <button
       type="button"
       @click="pageBuilderService.reorderComponent(-1)"
-      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-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0 pbx-text-black hover:pbx-text-white"
+      :disabled="!canMoveUp"
+      class="pbx-h-10 pbx-w-10 pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square pbx-text-black"
+      :class="[
+        canMoveUp
+          ? 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0'
+          : 'pbx-cursor-not-allowed pbx-bg-opacity-20 hover:pbx-bg-gray-200',
+      ]"
     >
       <span class="material-symbols-outlined"> move_up </span>
     </button>
     <button
       type="button"
       @click="pageBuilderService.reorderComponent(1)"
-      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-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0 pbx-text-black hover:pbx-text-white"
+      :disabled="!canMoveDown"
+      class="pbx-h-10 pbx-w-10 pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square pbx-text-black"
+      :class="[
+        canMoveDown
+          ? 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0'
+          : 'pbx-cursor-not-allowed pbx-bg-opacity-20 hover:pbx-bg-gray-200',
+      ]"
     >
       <span class="material-symbols-outlined"> move_down </span>
     </button>

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

@@ -188,10 +188,6 @@ const handleModalIframeSrc = function () {
     showModalIframeSrc.value = false
   }
 }
-
-const getRestoredElement = computed(() => {
-  return pageBuilderStateStore.getRestoredElement
-})
 </script>
 <template v-if="getElement">
   <div>

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

@@ -15,7 +15,6 @@ import Borders from './Editables/Borders.vue'
 import LinkEditor from './Editables/LinkEditor.vue'
 import TipTap from '../../TipTap/TipTap.vue'
 import EditGetElement from './Editables/EditGetElement.vue'
-import ElementEditor from './Editables/ElementEditor.vue'
 import HTMLEditor from './Editables/HTMLEditor.vue'
 import { getPageBuilder } from '../../../composables/builderInstance'
 import EditorAccordion from '../EditorMenu/EditorAccordion.vue'

package/src/Components/PageBuilder/UndoRedo/UndoRedo.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { sharedPageBuilderStore } from '../../../stores/shared-store'
+import GlobalLoader from '../../../Components/Loaders/GlobalLoader.vue'
+import { getPageBuilder } from '../../../composables/builderInstance'
+
+const pageBuilderService = getPageBuilder()
+
+const emit = defineEmits(['toolbar-hide-request'])
+
+// Use shared store instance
+const pageBuilderStateStore = sharedPageBuilderStore
+
+const getIsLoadingGlobal = computed(() => {
+  return pageBuilderStateStore.getIsLoadingGlobal
+})
+
+const historyIndex = computed(() => pageBuilderStateStore.getHistoryIndex)
+const historyLength = computed(() => pageBuilderStateStore.getHistoryLength)
+
+const canUndo = computed(() => historyIndex.value > 0)
+const canRedo = computed(() => historyIndex.value < historyLength.value - 1)
+
+const handleUndo = async function () {
+  if (canUndo.value) {
+    // Emit event to hide toolbar
+    emit('toolbar-hide-request')
+    await pageBuilderService.undo()
+    await pageBuilderService.clearHtmlSelection()
+  }
+}
+
+const handleRedo = async function () {
+  if (canRedo.value) {
+    // Emit event to hide toolbar
+    emit('toolbar-hide-request')
+    await pageBuilderService.redo()
+    await pageBuilderService.clearHtmlSelection()
+  }
+}
+</script>
+
+<template>
+  <GlobalLoader v-if="getIsLoadingGlobal"></GlobalLoader>
+  <div
+    @click="
+      async () => {
+        await pageBuilderService.clearHtmlSelection()
+      }
+    "
+    class="pbx-flex-1 pbx-flex pbx-justify-center pbx-items-center pbx-py-2 pbx-w-full gap-1"
+  >
+    <!-- Undo Start -->
+    <button @click="handleUndo" type="button" :disabled="!canUndo">
+      <div
+        class="pbx-h-10 pbx-w-10 pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square pbx-text-black hover:pbx-text-white"
+        :class="[
+          canUndo
+            ? 'pbx-cursor-pointer hover:pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-0'
+            : 'pbx-cursor-not-allowed pbx-bg-opacity-20  hover:pbx-bg-gray-200',
+        ]"
+      >
+        <span class="material-symbols-outlined"> undo </span>
+      </div>
+    </button>
+    <!-- Undo End -->
+    <div
+      class="pbx-text-xs pbx-text-gray-600 pbx-mx-2 pbx-py-3 pbx-px-2 pbx-border-solid pbx-border pbx-border-gray-200 pbx-rounded-full"
+    >
+      {{ historyIndex + 1 }}/{{ historyLength }}
+    </div>
+    <!-- Redo Start -->
+    <button @click="handleRedo" type="button" :disabled="!canRedo">
+      <div
+        class="pbx-h-10 pbx-w-10 pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square pbx-text-black hover:pbx-text-white"
+        :class="[
+          canRedo
+            ? 'pbx-cursor-pointer hover:pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-0'
+            : 'pbx-cursor-not-allowed pbx-bg-opacity-20  hover:pbx-bg-gray-200',
+        ]"
+      >
+        <span class="material-symbols-outlined"> redo </span>
+      </div>
+    </button>
+    <!-- Redo End -->
+  </div>
+</template>

package/src/PageBuilder/PageBuilder.vue

@@ -14,6 +14,7 @@ import DynamicModalBuilder from '../Components/Modals/DynamicModalBuilder.vue'
 import GlobalLoader from '../Components/Loaders/GlobalLoader.vue'
 import { useTranslations } from '../composables/useTranslations'
 import { getPageBuilder } from '../composables/builderInstance'
+import UndoRedo from '../Components/PageBuilder/UndoRedo/UndoRedo.vue'
 const pageBuilderService = getPageBuilder()
 /**
  * Props for PageBuilder component
@@ -167,10 +168,6 @@ const getElement = computed(() => {
   return pageBuilderStateStore.getElement
 })
 
-const getRestoredElement = computed(() => {
-  return pageBuilderStateStore.getRestoredElement
-})
-
 const getComponents = computed(() => {
   return pageBuilderStateStore.getComponents
 })
@@ -323,15 +320,19 @@ const ensureBuilderInitialized = function () {
   }
 }
 
-const pbxToolBar = ref(null)
+const pbxBuilderWrapper = ref(null)
 
-let lastToolbarLeft = null
-let lastToolbarTop = null
+const hideToolbar = function () {
+  const toolbar = document.querySelector('#pbxEditToolbar')
+  if (toolbar) {
+    toolbar.classList.remove('is-visible')
+    toolbar.removeAttribute('style')
+  }
+}
 
 function updatePanelPosition() {
-  const container = pbxToolBar.value
+  const container = pbxBuilderWrapper.value
   const editToolbarElement = container && container.querySelector('#pbxEditToolbar')
-  const restored = getRestoredElement.value
 
   if (!container || !editToolbarElement) return
 
@@ -361,16 +362,9 @@ function updatePanelPosition() {
     editToolbarElement.style.left = `${left}px`
     editToolbarElement.style.top = `${top}px`
     editToolbarElement.classList.add('is-visible')
-
-    lastToolbarLeft = left
-    lastToolbarTop = top
-  } else if (restored && lastToolbarLeft !== null && lastToolbarTop !== null) {
-    editToolbarElement.style.position = 'absolute'
-    editToolbarElement.style.left = `${lastToolbarLeft}px`
-    editToolbarElement.style.top = `${lastToolbarTop}px`
-    editToolbarElement.classList.add('is-visible')
   } else {
     editToolbarElement.classList.remove('is-visible')
+    editToolbarElement.removeAttribute('style') // Ensure all styles are removed
   }
 }
 
@@ -399,7 +393,7 @@ onMounted(async () => {
   updatePanelPosition()
 
   // Set up MutationObserver and event listeners
-  const container = pbxToolBar.value
+  const container = pbxBuilderWrapper.value
   if (!container) return
 
   const observer = new MutationObserver(updatePanelPosition)
@@ -538,6 +532,8 @@ onMounted(async () => {
       </template>
       <!-- Logo # end -->
 
+      <UndoRedo @toolbar-hide-request="hideToolbar"></UndoRedo>
+
       <div
         @click.self="
           async () => {
@@ -866,30 +862,18 @@ onMounted(async () => {
       <!-- Left Menu End -->
 
       <main
-        ref="pbxToolBar"
-        class="pbx-transition-all pbx-duration-300 pbx-font-sans pbx-p-1 pbx-flex pbx-flex-col pbx-grow pbx-rounded-tr-2xl pbx-rounded-tl-2xl pbx-border-solid pbx-border pbx-border-gray-200 pbx-items-stretch pbx-text-black pbx-h-[100vh] pbx-overflow-y-auto"
+        ref="pbxBuilderWrapper"
+        id="page-builder-wrapper"
+        class="pbx-transition-all pbx-duration-300 pbx-font-sans pbx-p-1 pbx-flex pbx-flex-col pbx-grow pbx-rounded-tr-2xl pbx-rounded-tl-2xl pbx-border-solid pbx-border pbx-border-gray-200 pbx-items-stretch pbx-text-black pbx-h-[100vh] pbx-overflow-y-scroll pbx-relative pbx-pt-14"
         :class="[getMenuRight ? 'pbx-w-full' : 'pbx-w-full']"
       >
         <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"
-          style="
-            box-shadow: 0 0 0 10px oklch(86.9% 0.005 56.366);
-            background: oklch(86.9% 0.005 56.366);
-          "
         >
           <template v-if="getElement">
             <EditGetElement></EditGetElement>
           </template>
-          <template v-if="getRestoredElement">
-            <button
-              @click="pageBuilderService.restoreDeletedElementToDOM"
-              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-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white pbx-bg-gray-200 focus-visible:pbx-ring-0"
-            >
-              <span class="material-symbols-outlined"> undo </span>
-            </button>
-          </template>
         </div>
         <!-- Element Popover toolbar end -->
 
@@ -926,7 +910,7 @@ onMounted(async () => {
               await pageBuilderService.clearHtmlSelection()
             }
           "
-          class="pbx-w-16 pbx-bg-myPrimaryLightGrayColor pbx-pt-5 pbx-z-20 pbx-flex-shrink-0 pbx-overflow-hidden pbx-border-0 pbx-border-solid pbx-border-l-0 pbx-border-l-gray-600 pbx-rounded-l-2xl pbx-h-[100vh] pbx-pl-2 pbx-pr-2"
+          class="pbx-w-18 pbx-bg-myPrimaryLightGrayColor pbx-pt-5 pbx-z-20 pbx-flex-shrink-0 pbx-overflow-hidden pbx-border-0 pbx-border-solid pbx-border-l-0 pbx-border-l-gray-600 pbx-rounded-l-2xl pbx-h-[100vh] pbx-pl-2 pbx-pr-2"
         >
           <div
             @click.self="

package/src/css/style.css

@@ -395,11 +395,14 @@
   padding-right: 1rem;
   padding-left: 1rem;
   height: 2.2rem;
+  box-shadow: 0 0 0 10px oklch(86.9% 0.005 56.366);
+  background: oklch(86.9% 0.005 56.366);
 }
 
 /* CSS for content inside page builder # start */
 #pagebuilder {
   position: relative;
+  max-height: 100%;
 }
 #pagebuilder a {
   pointer-events: none;
@@ -475,3 +478,29 @@
   list-style: disc !important;
   padding: 0rem;
 }
+
+.pbx-reorder-highlight {
+  animation: pbx-reorder-flash 0.4s ease-in-out;
+}
+
+@keyframes pbx-reorder-flash {
+  0% {
+    box-shadow: 0 0 0 0px rgba(66, 153, 225, 0.7);
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    box-shadow: 0 0 0 10px rgba(66, 153, 225, 0);
+    transform: scale(0.2); /* Even more shrink */
+    opacity: 0.8;
+  }
+  100% {
+    box-shadow: 0 0 0 0px rgba(66, 153, 225, 0);
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.pbx-sibling-highlight {
+  border: 2px dashed #4299e1; /* Blue dashed border */
+}

package/src/services/LocalStorageManager.ts

@@ -1 +1,25 @@
-export class LocalStorageManager {}
+export class LocalStorageManager {
+  private static readonly HISTORY_KEY_SUFFIX = '-history'
+  private static readonly MAX_HISTORY_SIZE = 10
+
+  public static getHistory(baseKey: string): any[] {
+    const historyKey = baseKey + this.HISTORY_KEY_SUFFIX
+    const historyJson = localStorage.getItem(historyKey)
+    return historyJson ? JSON.parse(historyJson) : []
+  }
+
+  public static addToHistory(baseKey: string, data: any) {
+    const historyKey = baseKey + this.HISTORY_KEY_SUFFIX
+    let history = this.getHistory(baseKey)
+    history.push(data)
+    if (history.length > this.MAX_HISTORY_SIZE) {
+      history = history.slice(history.length - this.MAX_HISTORY_SIZE)
+    }
+    localStorage.setItem(historyKey, JSON.stringify(history))
+  }
+
+  public static clearHistory(baseKey: string) {
+    const historyKey = baseKey + this.HISTORY_KEY_SUFFIX
+    localStorage.removeItem(historyKey)
+  }
+}