@myissue/vue-website-page-builder 3.3.96 → 3.3.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.3.96",
+  "version": "3.3.98",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",
@@ -52,12 +52,12 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/qaiswardag/vue-website-page-builder.git"
+    "url": "git+ssh://git@github.com/myissue-org/vue-website-page-builder.git"
   },
   "bugs": {
-    "url": "https://github.com/qaiswardag/vue-website-page-builder/issues"
+    "url": "https://github.com/myissue-org/vue-website-page-builder/issues"
   },
-  "homepage": "https://mybuilder.dev",
+  "homepage": "https://www.mybuilder.dev",
   "engines": {
     "node": ">=18.0.0",
     "npm": ">=8.0.0"

package/src/Components/Homepage/Footer.vue

@@ -18,7 +18,7 @@ const version = __APP_VERSION__
       </p>
       <p class="pbx-myPrimaryParagraph pbx-mt-3">
         <a
-          href="https://github.com/qaiswardag/vue-website-page-builder"
+          href="https://github.com/myissue-org/vue-website-page-builder"
           target="_blank"
           class="pbx-myPrimaryLink pbx-text-myPrimaryDarkGrayColor"
         >

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/UndoRedo/UndoRedo.vue

@@ -1,11 +1,13 @@
-<script setup>
-import { computed } from 'vue'
+<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
 
@@ -13,30 +15,69 @@ 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 () {
-  await pageBuilderService.undo()
+  if (canUndo.value) {
+    // Emit event to hide toolbar
+    emit('toolbar-hide-request')
+    await pageBuilderService.undo()
+    await pageBuilderService.clearHtmlSelection()
+  }
 }
+
 const handleRedo = async function () {
-  await pageBuilderService.redo()
+  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 class="pbx-flex-1 pbx-flex pbx-justify-center pbx-items-center pbx-py-2 pbx-w-full gap-2">
+  <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">
+    <button @click="handleUndo" type="button" :disabled="!canUndo">
       <div
-        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 focus-visible:pbx-ring-0 pbx-text-black hover:pbx-text-white"
+        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">
+    <button @click="handleRedo" type="button" :disabled="!canRedo">
       <div
-        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 focus-visible:pbx-ring-0 pbx-text-black hover:pbx-text-white pbx-ml-2"
+        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>

package/src/PageBuilder/PageBuilder.vue

@@ -320,12 +320,18 @@ const ensureBuilderInitialized = function () {
   }
 }
 
-const pageBuilderWrapper = ref(null)
-let lastToolbarLeft = null
-let lastToolbarTop = null
+const pbxBuilderWrapper = ref(null)
+
+const hideToolbar = function () {
+  const toolbar = document.querySelector('#pbxEditToolbar')
+  if (toolbar) {
+    toolbar.classList.remove('is-visible')
+    toolbar.removeAttribute('style')
+  }
+}
 
 function updatePanelPosition() {
-  const container = pageBuilderWrapper.value
+  const container = pbxBuilderWrapper.value
   const editToolbarElement = container && container.querySelector('#pbxEditToolbar')
 
   if (!container || !editToolbarElement) return
@@ -356,11 +362,9 @@ function updatePanelPosition() {
     editToolbarElement.style.left = `${left}px`
     editToolbarElement.style.top = `${top}px`
     editToolbarElement.classList.add('is-visible')
-
-    lastToolbarLeft = left
-    lastToolbarTop = top
   } else {
     editToolbarElement.classList.remove('is-visible')
+    editToolbarElement.removeAttribute('style') // Ensure all styles are removed
   }
 }
 
@@ -389,7 +393,7 @@ onMounted(async () => {
   updatePanelPosition()
 
   // Set up MutationObserver and event listeners
-  const container = pageBuilderWrapper.value
+  const container = pbxBuilderWrapper.value
   if (!container) return
 
   const observer = new MutationObserver(updatePanelPosition)
@@ -528,7 +532,7 @@ onMounted(async () => {
       </template>
       <!-- Logo # end -->
 
-      <UndoRedo></UndoRedo>
+      <UndoRedo @toolbar-hide-request="hideToolbar"></UndoRedo>
 
       <div
         @click.self="
@@ -858,18 +862,14 @@ onMounted(async () => {
       <!-- Left Menu End -->
 
       <main
-        ref="pageBuilderWrapper"
+        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-auto"
+        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>

package/src/css/style.css

@@ -395,6 +395,8 @@
   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 */
@@ -476,3 +478,25 @@
   list-style: disc !important;
   padding: 0rem;
 }
+
+.pbx-reorder-highlight {
+  animation: pbx-reorder-flash 0.4s ease-in-out;
+}
+
+@keyframes pbx-reorder-flash {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(0.8);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.pbx-sibling-highlight {
+}