@myissue/vue-website-page-builder 3.3.38 → 3.3.40

package/package.json

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

@@ -273,7 +273,7 @@ const getRestoredElement = computed(() => {
           <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-50 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white pbx-bg-gray-300 focus-visible:pbx-ring-0"
+            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-50 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
           >
             <span class="material-symbols-outlined"> play_circle </span>
           </button>
@@ -290,7 +290,7 @@ const getRestoredElement = computed(() => {
           <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-50 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white pbx-bg-gray-300 focus-visible:pbx-ring-0"
+            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-50 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
           >
             <span class="material-symbols-outlined"> edit </span>
           </button>
@@ -310,7 +310,7 @@ const getRestoredElement = computed(() => {
           <button
             @click="handleAddImage"
             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-50 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white pbx-bg-gray-300 focus-visible:pbx-ring-0"
+            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-50 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
           >
             <span class="material-symbols-outlined"> add_photo_alternate </span>
           </button>
@@ -332,7 +332,7 @@ const getRestoredElement = computed(() => {
         <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-50 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white pbx-bg-gray-300 focus-visible:pbx-ring-0"
+          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-50 pbx-aspect-square hover:pbx-bg-red-500 hover:pbx-fill-white focus-visible:pbx-ring-0"
         >
           <span class="material-symbols-outlined"> delete </span>
         </button>
@@ -340,7 +340,7 @@ const getRestoredElement = computed(() => {
 
       <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-50 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white pbx-bg-gray-300 focus-visible:pbx-ring-0"
+        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-50 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
         @click="pageBuilderService.clearHtmlSelection()"
       >
         <span class="material-symbols-outlined"> close </span>

package/src/PageBuilder/PageBuilder.vue

@@ -288,7 +288,6 @@ function updatePanelPosition() {
     const selectedRect = selected.getBoundingClientRect()
     const containerRect = container.getBoundingClientRect()
 
-    // Position editToolbar just above selected element, with a gap
     const left =
       selectedRect.left - containerRect.left + selectedRect.width / 2 - editToolbar.offsetWidth / 2
 
@@ -301,25 +300,17 @@ function updatePanelPosition() {
     editToolbar.style.position = 'absolute'
     editToolbar.style.left = `${left}px`
     editToolbar.style.top = `${top}px`
-    editToolbar.style.opacity = '1'
-    editToolbar.style.pointerEvents = 'auto'
-    editToolbar.style.transform = 'translateY(0)'
+    editToolbar.classList.add('is-visible')
 
-    // Store last position
     lastToolbarLeft = left
     lastToolbarTop = top
   } else if (restored && lastToolbarLeft !== null && lastToolbarTop !== null) {
-    // Use last position for restore icon
     editToolbar.style.position = 'absolute'
     editToolbar.style.left = `${lastToolbarLeft}px`
     editToolbar.style.top = `${lastToolbarTop}px`
-    editToolbar.style.opacity = '1'
-    editToolbar.style.pointerEvents = 'auto'
-    editToolbar.style.transform = 'translateY(0)'
+    editToolbar.classList.add('is-visible')
   } else {
-    editToolbar.style.opacity = '0'
-    editToolbar.style.pointerEvents = 'none'
-    editToolbar.style.transform = 'translateY(0.5rem)'
+    editToolbar.classList.remove('is-visible')
   }
 }
 
@@ -691,16 +682,16 @@ onMounted(async () => {
 
         <main
           ref="pbxToolBar"
-          class="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-h-[90vh]"
+          class="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-h-[100vh]"
           :class="{ 'pbx-mr-2': !getMenuRight, '': getMenuRight }"
         >
           <div
             id="editToolbar"
-            class="pbx-z-30 lg:pbx-mx-20 pbx-flex pbx-gap-2 pbx-justify-center pbx-min-w-48 pbx-items-center pbx-rounded-full pbx-px-4"
+            class="pbx-z-30 lg:pbx-mx-20 pbx-flex pbx-gap-2 pbx-justify-center pbx-min-w-48 pbx-items-center pbx-rounded-full pbx-px-4 pbx-bg-red-200 pbx-h-0"
             style="
-              outline: 10px solid oklch(86.9% 0.005 56.366);
-              outline-offset: 0px;
+              box-shadow: 0 0 0 10px oklch(86.9% 0.005 56.366);
               background: oklch(86.9% 0.005 56.366);
+              border-radius: 9999px;
             "
           >
             <template v-if="getElement">
@@ -783,7 +774,7 @@ onMounted(async () => {
         </aside>
       </div>
       <div
-        class="pbx-flex pbx-items-center pbx-justify-center pbx-border-solid pbx-border-t pbx-border-gray-200 pbx-py-4"
+        class="pbx-flex pbx-items-center pbx-justify-center pbx-p-4 pbx-border-t pbx-border-t-gray-200 pbx-border-solid lg:pbx-mx-10"
       >
         <div
           @click="

package/src/css/app.css

@@ -383,3 +383,171 @@
   line-height: 1.2;
   margin-left: 1em; /* Adjust this value as needed */
 }
+
+#settingsPanel {
+  border-radius: 9999px;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(1rem);
+  transition:
+    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.08),
+    0 1.5px 4px rgba(0, 0, 0, 0.06);
+}
+
+[selected]:hover #settingsPanel,
+[selected]:focus-within #settingsPanel {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+#editToolbar {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(0.1rem) scale(0.1);
+
+  border-radius: 9999px;
+  transition:
+    left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+
+#editToolbar.is-visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0) scale(1);
+  min-width: 12rem;
+  width: 16rem;
+  height: 2.5rem;
+  border-radius: 9999px;
+}
+
+#contains-pagebuilder {
+  position: relative; /* make this the positioning context for absolute children */
+  overflow-y: auto;
+}
+
+.smooth-transition {
+  transition: opacity 0.3s ease-in-out;
+}
+
+/* Manage P, Link, H1, H2 # end */
+
+/* CSS for content inside page builder # start */
+#pagebuilder a {
+  pointer-events: none;
+}
+
+#pagebuilder #youtube-video::before {
+  content: 'Select Video Element';
+  font-family: 'Jost';
+  background: #16a34a !important;
+  color: white;
+  text-decoration: none;
+  margin-right: 8px;
+  vertical-align: middle;
+  min-height: 3rem;
+  padding: 0.75rem 0.75rem;
+  white-space: nowrap;
+  word-break: keep-all;
+  font-weight: 500;
+  display: inline-flex;
+  gap: 0.25rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  border: 1px solid transparent;
+  margin-bottom: 20px;
+  font-size: 0.8rem !important;
+}
+
+@media (min-width: 640px) {
+  #pagebuilder #youtube-video::before {
+    font-size: 0.9rem !important;
+    width: auto;
+  }
+}
+
+#pagebuilder #youtube-video:hover::before {
+  text-decoration: none;
+  cursor: pointer;
+}
+
+#page-builder-editor a,
+#pagebuilder a {
+  text-decoration: underline;
+}
+
+#page-builder-editor #linktree p,
+#pagebuilder #linktree p {
+  width: 100%;
+}
+
+#page-builder-editor #linktree a,
+#pagebuilder #linktree a {
+  @apply pbx-py-4 pbx-px-2 pbx-block pbx-w-full;
+}
+
+#page-builder-editor #linktree a,
+#pagebuilder #linktree a {
+  text-decoration: none;
+  font-weight: 500;
+  color: inherit !important;
+  width: 100%;
+  cursor: pointer;
+}
+#page-builder-editor strong,
+#pagebuilder strong {
+  font-weight: 500;
+}
+
+#page-builder-editor ol,
+#pagebuilder ol,
+#page-builder-editor ul,
+#pagebuilder ul {
+  list-style: disc !important;
+  padding: 0rem;
+}
+
+/* Add overflow-x property to enable horizontal scrollbar */
+.scrollable {
+  overflow-x: auto;
+  overflow-y: auto;
+  /* Add any other desired styles for the scrollable element */
+}
+/* Scrollbar Styles  - end */
+
+/* Scrollbar Styles  - start */
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: black transparent;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 25px;
+}
+
+/* Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+  width: 6px;
+  height: 6px; /* Add height for horizontal scrollbar */
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: black;
+  border-radius: 25px;
+  border: none;
+}

package/src/css/dev-global.css

@@ -2,120 +2,6 @@
 These styles affect all HTML elements (like input, button, h1, etc.) in the consuming app. */
 @tailwind base;
 
-.smooth-transition {
-  transition: opacity 0.3s ease-in-out;
-}
-
-/* Manage P, Link, H1, H2 # end */
-
-/* CSS for content inside page builder # start */
-#pagebuilder a {
-  pointer-events: none;
-}
-
-#pagebuilder #youtube-video::before {
-  content: 'Select Video Element';
-  font-family: 'Jost';
-  background: #16a34a !important;
-  color: white;
-  text-decoration: none;
-  margin-right: 8px;
-  vertical-align: middle;
-  min-height: 3rem;
-  padding: 0.75rem 0.75rem;
-  white-space: nowrap;
-  word-break: keep-all;
-  font-weight: 500;
-  display: inline-flex;
-  gap: 0.25rem;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  border: 1px solid transparent;
-  margin-bottom: 20px;
-  font-size: 0.8rem !important;
-}
-
-@media (min-width: 640px) {
-  #pagebuilder #youtube-video::before {
-    font-size: 0.9rem !important;
-    width: auto;
-  }
-}
-
-#pagebuilder #youtube-video:hover::before {
-  text-decoration: none;
-  cursor: pointer;
-}
-
-#page-builder-editor a,
-#pagebuilder a {
-  text-decoration: underline;
-}
-
-#page-builder-editor #linktree p,
-#pagebuilder #linktree p {
-  width: 100%;
-}
-
-#page-builder-editor #linktree a,
-#pagebuilder #linktree a {
-  @apply pbx-py-4 pbx-px-2 pbx-block pbx-w-full;
-}
-
-#page-builder-editor #linktree a,
-#pagebuilder #linktree a {
-  text-decoration: none;
-  font-weight: 500;
-  color: inherit !important;
-  width: 100%;
-  cursor: pointer;
-}
-#page-builder-editor strong,
-#pagebuilder strong {
-  font-weight: 500;
-}
-
-#page-builder-editor ol,
-#pagebuilder ol,
-#page-builder-editor ul,
-#pagebuilder ul {
-  list-style: disc !important;
-  padding: 0rem;
-}
-
-/* Scrollbar Styles  - start */
-/* Firefox */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: black transparent;
-}
-
-*::-webkit-scrollbar-track {
-  background: transparent;
-  border-radius: 25px;
-}
-
-/* Chrome, Edge, and Safari */
-*::-webkit-scrollbar {
-  width: 6px;
-  height: 6px; /* Add height for horizontal scrollbar */
-}
-
-*::-webkit-scrollbar-thumb {
-  background-color: black;
-  border-radius: 25px;
-  border: none;
-}
-
-/* Add overflow-x property to enable horizontal scrollbar */
-.scrollable {
-  overflow-x: auto;
-  overflow-y: auto;
-  /* Add any other desired styles for the scrollable element */
-}
-/* Scrollbar Styles  - end */
-
 .tailwind-pagination-package {
   box-shadow: none !important;
   display: flex;
@@ -124,29 +10,3 @@ 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 */
-}