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

package/package.json

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

package/src/Components/Modals/BuilderComponents.vue

@@ -50,7 +50,7 @@ const firstButtonBuilder = function () {
       </div>
     </div>
     <div
-      class="pbx-py-4 pbx-flex sm:pbx-justify-end pbx-justify-center pbx-border-solid pbx-border-t pbx-border-gray-200 pbx-mt-4"
+      class="pbx-border-0 pbx-py-4 pbx-flex sm:pbx-justify-end pbx-justify-center pbx-border-solid pbx-border-t pbx-border-gray-200 pbx-mt-4"
     >
       <div class="sm:pbx-w-3/6 pbx-w-full pbx-px-2 pbx-my-2 pbx-flex pbx-gap-2 pbx-justify-end">
         <button

package/src/PageBuilder/PageBuilder.vue

@@ -71,23 +71,38 @@ const getPageBuilderConfig = computed(() => {
 const getMenuRight = computed(() => {
   return pageBuilderStateStore.getMenuRight
 })
+const openPageBuilderPreviewModal = ref(false)
+
 const previewCurrentDesign = function () {
   pageBuilderService.previewCurrentDesign()
 }
+const handlePageBuilderPreview = function () {
+  previewCurrentDesign()
+  openPageBuilderPreviewModal.value = true
+}
+
+const openPageBuilderPreviewMobile = ref(false)
+
+const previewCurrentDesignMobile = function () {
+  pageBuilderService.previewCurrentDesign()
+}
+const handlePageBuilderPreviewMobile = function () {
+  previewCurrentDesignMobile()
+  openPageBuilderPreviewMobile.value = true
+}
+
 const openAppNotStartedModal = ref(false)
-const openPageBuilderPreviewModal = ref(false)
 
 const handlAppNotStartedModal = function () {
   openAppNotStartedModal.value = false
 }
-const handlePageBuilderPreview = function () {
-  previewCurrentDesign()
-  openPageBuilderPreviewModal.value = true
-}
 
 const firstPageBuilderPreviewModalButton = function () {
   openPageBuilderPreviewModal.value = false
 }
+const firstPageBuilderPreviewModalButtonMobile = function () {
+  openPageBuilderPreviewMobile.value = false
+}
 
 const showModalAddComponent = ref(false)
 const titleModalAddComponent = ref('')
@@ -388,6 +403,15 @@ onMounted(async () => {
       <Preview></Preview>
     </ModalBuilder>
 
+    <ModalBuilder
+      title="Mobile"
+      :showModalBuilder="openPageBuilderPreviewMobile"
+      @closeMainModalBuilder="firstPageBuilderPreviewModalButtonMobile"
+      maxWidth="lg"
+    >
+      <Preview />
+    </ModalBuilder>
+
     <DynamicModalBuilder
       :showDynamicModalBuilder="showModalResumeEditing"
       :isLoading="getIsLoadingResumeEditing"
@@ -577,7 +601,9 @@ onMounted(async () => {
                 }
               "
             >
-              <div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2">
+              <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"
+              >
                 <span class="lg:pbx-block pbx-hidden">
                   <div class="pbx-whitespace-nowrap pbx-cursor-pointer">Add new Components</div>
                 </span>
@@ -588,7 +614,7 @@ onMounted(async () => {
                 </span>
               </div>
             </div>
-            <div class="pbx-flex pbx-items-center pbx-justify-center">
+            <div class="pbx-flex pbx-items-center pbx-justify-center pbx-mr-2">
               <div
                 @click="
                   async () => {
@@ -600,10 +626,6 @@ onMounted(async () => {
                 "
               >
                 <div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2">
-                  <div class="pbx-whitespace-nowrap lg:pbx-block pbx-hidden pbx-cursor-pointer">
-                    Preview
-                  </div>
-
                   <span
                     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"
                   >
@@ -612,6 +634,26 @@ onMounted(async () => {
                 </div>
               </div>
             </div>
+            <div class="lg:pbx-flex pbx-hidden pbx-items-center pbx-justify-center">
+              <div
+                @click="
+                  async () => {
+                    pageBuilderStateStore.setMenuRight(false)
+                    pageBuilderStateStore.setElement(null)
+                    await pageBuilderService.clearHtmlSelection()
+                    handlePageBuilderPreviewMobile()
+                  }
+                "
+              >
+                <div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2">
+                  <span
+                    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"
+                  >
+                    <span class="material-symbols-outlined"> phone_iphone </span>
+                  </span>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
         <!-- Options # Start -->

package/src/css/dev-global.css

@@ -10,3 +10,7 @@ These styles affect all HTML elements (like input, button, h1, etc.) in the cons
   gap: 6px 0px;
   justify-content: center;
 }
+
+.mobile-preview-frame {
+  container-type: inline-size;
+}