@myissue/vue-website-page-builder 3.3.47 → 3.3.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.3.47",
+  "version": "3.3.49",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

package/src/PageBuilder/PageBuilder.vue

@@ -369,7 +369,7 @@ onMounted(async () => {
 
 <template>
   <div
-    class="pbx-font-sans pbx-max-w-full pbx-m-1 pbx-border-solid pbx-border pbx-border-gray-400 pbx-inset-x-0 pbx-z-10 pbx-bg-white pbx-overflow-x-auto pbx-h-full"
+    class="pbx-font-sans pbx-max-w-full pbx-border-solid pbx-border pbx-border-gray-400 pbx-inset-x-0 pbx-z-10 pbx-bg-white pbx-overflow-x-auto pbx-h-full"
   >
     <GlobalLoader v-if="getIsLoadingGlobal & !openAppNotStartedModal"></GlobalLoader>
     <ModalBuilder
@@ -409,7 +409,7 @@ onMounted(async () => {
       @closeMainModalBuilder="firstPageBuilderPreviewModalButtonMobile"
       maxWidth="lg"
     >
-      <Preview />
+      <Preview :mobile="true" />
     </ModalBuilder>
 
     <DynamicModalBuilder
@@ -538,7 +538,7 @@ onMounted(async () => {
               "
             >
               <button
-                class="pbx-mySecondaryButton pbx-h-6 pbx-flex pbx-gap-2"
+                class="pbx-mySecondaryButton pbx-h-6 pbx-flex pbx-gap-2 lg:mr-2"
                 @click.stop="
                   async () => {
                     await pageBuilderService.clearHtmlSelection()
@@ -602,7 +602,7 @@ onMounted(async () => {
               "
             >
               <div
-                class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2 pbx-border-0 pbx-border-solid pbx-border-r pbx-border-gray-200 pbx-pr-2"
+                class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2 pbx-border-0 pbx-border-solid pbx-border-r pbx-border-gray-200 lg:pbx-pr-6"
               >
                 <span class="lg:pbx-block pbx-hidden">
                   <div class="pbx-whitespace-nowrap pbx-cursor-pointer">Add new Components</div>
@@ -809,7 +809,7 @@ onMounted(async () => {
             'pbx-w-0': !getMenuRight,
             'pbx-w-80 pbx-mr-2 pbx-bg-myPrimaryLightGrayColor pbx-items-stretch': getMenuRight,
           }"
-          class="pbx-duration-300 pbx-z-20 pbx-flex-shrink-0 pbx-overflow-hidden pbx-shadow-sm pbx-rounded-l-2xl"
+          class="pbx-duration-300 pbx-z-20 pbx-flex-shrink-0 pbx-overflow-hidden pbx-shadow-sm pbx-rounded-l-2xl pbx-h-[100vh]"
         >
           <RightSidebarEditor @closeEditor="pageBuilderStateStore.setMenuRight(false)">
           </RightSidebarEditor>

package/src/PageBuilder/Preview.vue

@@ -1,6 +1,12 @@
 <script setup>
 import { ref } from 'vue'
 
+defineProps({
+  mobile: {
+    type: Boolean,
+  },
+})
+
 const htmlPage = ref('')
 
 const previewData = localStorage.getItem('preview')
@@ -19,13 +25,26 @@ if (previewData) {
 </script>
 
 <template>
-  <div>
-    <div
-      class="pbx-text-black pbx-w-full pbx-inset-x-0 pbx-h-[90vh] pbx-bg-white pbx-overflow-x-scroll lg:pbx-pt-2 pbx-pt-2"
-    >
-      <div id="page-builder-editor">
-        <div class="" v-html="htmlPage"></div>
+  <template v-if="!mobile">
+    <div>
+      <div
+        class="pbx-text-black pbx-w-full pbx-inset-x-0 pbx-h-[90vh] pbx-bg-white pbx-overflow-x-scroll lg:pbx-pt-2 pbx-pt-2"
+      >
+        <div id="page-builder-editor">
+          <div class="" v-html="htmlPage"></div>
+        </div>
+      </div>
+    </div>
+  </template>
+  <template v-if="mobile">
+    <div>
+      <div
+        class="pbx-text-black pbx-w-full pbx-inset-x-0 pbx-h-[90vh] pbx-bg-white pbx-overflow-x-scroll lg:pbx-pt-2 pbx-pt-2"
+      >
+        <div id="page-builder-editor">
+          <div class="" v-html="htmlPage"></div>
+        </div>
       </div>
     </div>
-  </div>
+  </template>
 </template>

package/src/css/app.css

@@ -420,7 +420,6 @@
     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 {