@myissue/vue-website-page-builder 3.3.64 → 3.3.67

package/src/PageBuilder/PageBuilder.vue

@@ -13,6 +13,8 @@ import { useDebounce } from '../composables/useDebounce.ts'
 import DynamicModalBuilder from '../Components/Modals/DynamicModalBuilder.vue'
 import GlobalLoader from '../Components/Loaders/GlobalLoader.vue'
 import { getPageBuilder } from '../composables/builderInstance'
+import { useI18n } from 'vue-i18n'
+
 const pageBuilderService = getPageBuilder()
 /**
  * Props for PageBuilder component
@@ -34,6 +36,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  showPublishButton: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 // Use shared Pinia instance for PageBuilder package
@@ -49,11 +55,15 @@ provide('internalPinia', internalPinia)
 provide('CustomMediaComponent', props.CustomMediaLibraryComponent)
 provide('CustomBuilderComponents', props.CustomBuilderComponents)
 
-const emit = defineEmits(['handleClosePageBuilder'])
+const emit = defineEmits(['handleClosePageBuilder', 'handlePublishPageBuilder'])
 
 const closePageBuilder = function () {
   emit('handleClosePageBuilder')
 }
+const closePublish = function () {
+  pageBuilderService.handleManualSave()
+  emit('handlePublishPageBuilder')
+}
 
 // Provide modal close function for custom components
 const closeAddComponentModal = () => {
@@ -141,6 +151,28 @@ const getHasLocalDraftForUpdate = computed(() => {
   return pageBuilderStateStore.getHasLocalDraftForUpdate
 })
 
+const { locale } = useI18n()
+
+watch(locale, (newLocale) => {
+  const config = pageBuilderStateStore.getPageBuilderConfig
+  if (config && config.userSettings && config.userSettings.language) {
+    // Update the store with a full config (if you want to update the store)
+    const updatedConfig = {
+      ...config,
+      userSettings: {
+        ...config.userSettings,
+        language: {
+          ...config.userSettings.language,
+          default: newLocale,
+        },
+      },
+    }
+
+    pageBuilderStateStore.setPageBuilderConfig(updatedConfig)
+    pageBuilderService.saveBuilderConfigToLocalStorage(updatedConfig)
+  }
+})
+
 watch(getHasLocalDraftForUpdate, (newVal) => {
   if (newVal) {
     handlerRumeEditingForUpdate()
@@ -185,8 +217,6 @@ const handleSelectComponent = function (componentObject) {
   pageBuilderStateStore.setComponent(componentObject)
 }
 
-const draggableZone = ref(null)
-
 const getIsLoadingGlobal = computed(() => {
   return pageBuilderStateStore.getIsLoadingGlobal
 })
@@ -292,10 +322,10 @@ let lastToolbarTop = null
 
 function updatePanelPosition() {
   const container = pbxToolBar.value
-  const editToolbar = container && container.querySelector('#editToolbar')
+  const editToolbarElement = container && container.querySelector('#pbxEditToolbar')
   const restored = getRestoredElement.value
 
-  if (!container || !editToolbar) return
+  if (!container || !editToolbarElement) return
 
   const selected = container.querySelector('[selected]')
 
@@ -304,33 +334,41 @@ function updatePanelPosition() {
     const containerRect = container.getBoundingClientRect()
 
     const left =
-      selectedRect.left - containerRect.left + selectedRect.width / 2 - editToolbar.offsetWidth / 2
+      selectedRect.left -
+      containerRect.left +
+      selectedRect.width / 2 -
+      editToolbarElement.offsetWidth / 2
 
     const GAP = 20 // px
     const proposedTop =
-      selectedRect.top - containerRect.top + container.scrollTop - editToolbar.offsetHeight - GAP
+      selectedRect.top -
+      containerRect.top +
+      container.scrollTop -
+      editToolbarElement.offsetHeight -
+      GAP
 
     const top = Math.max(0, proposedTop)
 
-    editToolbar.style.position = 'absolute'
-    editToolbar.style.left = `${left}px`
-    editToolbar.style.top = `${top}px`
-    editToolbar.classList.add('is-visible')
+    editToolbarElement.style.position = 'absolute'
+    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) {
-    editToolbar.style.position = 'absolute'
-    editToolbar.style.left = `${lastToolbarLeft}px`
-    editToolbar.style.top = `${lastToolbarTop}px`
-    editToolbar.classList.add('is-visible')
+    editToolbarElement.style.position = 'absolute'
+    editToolbarElement.style.left = `${lastToolbarLeft}px`
+    editToolbarElement.style.top = `${lastToolbarTop}px`
+    editToolbarElement.classList.add('is-visible')
   } else {
-    editToolbar.classList.remove('is-visible')
+    editToolbarElement.classList.remove('is-visible')
   }
 }
 
 onMounted(async () => {
-  await pageBuilderService.completeBuilderInitialization()
+  // await delay(2000)
+  await pageBuilderService.completeBuilderInitialization(undefined, true)
 
   updatePanelPosition()
 
@@ -525,7 +563,7 @@ onMounted(async () => {
                   ></span>
                 </span>
               </div>
-              <div>Save</div>
+              <div>{{ $t('button.save') }}</div>
             </button>
             <!-- Save End -->
 
@@ -568,7 +606,7 @@ onMounted(async () => {
                   </span>
                 </div>
                 <div class="lg:pbx-block pbx-hidden">
-                  <span> Reset Page </span>
+                  <span>{{ $t('button.resetPage') }}</span>
                 </div>
               </button>
             </template>
@@ -602,10 +640,12 @@ 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 lg:pbx-pr-6"
+                class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2 pbx-border-gray-200"
               >
                 <span class="lg:pbx-block pbx-hidden">
-                  <div class="pbx-whitespace-nowrap pbx-cursor-pointer">Add new Components</div>
+                  <div class="pbx-whitespace-nowrap pbx-cursor-pointer">
+                    {{ $t('button.addComponents') }}
+                  </div>
                 </span>
                 <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"
@@ -656,18 +696,92 @@ onMounted(async () => {
             </div>
           </div>
         </div>
-        <!-- Options # Start -->
-        <div
-          @click.self="
-            async () => {
-              await pageBuilderService.clearHtmlSelection()
-            }
+
+        <div class="pbx-flex gap-2 pbx-items-center">
+          <!-- Options # Start -->
+          <div
+            @click.self="
+              async () => {
+                await pageBuilderService.clearHtmlSelection()
+              }
+            "
+            class="pbx-flex pbx-items-center pbx-py-2 pbx-min-h-20 pbx-max-h-20 pbx-w-full"
+            :class="[showCloseButton ? 'pbx-justify-between' : 'pbx-justify-end']"
+          >
+            <ToolbarOption></ToolbarOption>
+          </div>
+          <!-- Options # Start -->
+        </div>
+        <!-- Close & Publish buttons start -->
+        <template v-if="showPublishButton">
+          <div class="pbx-ml-2">
+            <button
+              class="pbx-myPrimaryButton"
+              @click="
+                async () => {
+                  closePublish()
+                  await pageBuilderService.clearHtmlSelection()
+                }
+              "
+            >
+              {{ $t('button.publish') }}
+            </button>
+          </div>
+        </template>
+        <!-- Select language -->
+        <template
+          v-if="
+            getPageBuilderConfig &&
+            getPageBuilderConfig.userSettings &&
+            getPageBuilderConfig.userSettings.language &&
+            !getPageBuilderConfig.userSettings.language.disableLanguageDropDown
           "
-          class="pbx-flex pbx-items-center pbx-py-2 pbx-min-h-20 pbx-max-h-20 pbx-w-full"
-          :class="[showCloseButton ? 'pbx-justify-between' : 'pbx-justify-end']"
         >
-          <ToolbarOption></ToolbarOption>
-          <template v-if="showCloseButton">
+          <template
+            v-if="
+              getPageBuilderConfig &&
+              getPageBuilderConfig.userSettings &&
+              getPageBuilderConfig.userSettings.language
+            "
+          >
+            <div class="pbx-flex pbx-justify-center pbx-items-center pbx-ml-2">
+              <select
+                class="pbx-myPrimarySelect pbx-min-w-20 pbx-max-w-2pbx-min-w-20 pbx-w-max"
+                v-model="$i18n.locale"
+              >
+                <template
+                  v-if="
+                    Array.isArray(getPageBuilderConfig.userSettings.language.enable) &&
+                    getPageBuilderConfig.userSettings.language.enable.length >= 1
+                  "
+                >
+                  <template
+                    v-for="lang in pageBuilderService
+                      .availableLanguage()
+                      .filter((l) => getPageBuilderConfig.userSettings.language.enable.includes(l))"
+                    :key="lang"
+                  >
+                    <option :value="lang">{{ lang }}</option>
+                  </template>
+                </template>
+                <template
+                  v-if="
+                    !getPageBuilderConfig.userSettings.language.enable ||
+                    (Array.isArray(getPageBuilderConfig.userSettings.language.enable) &&
+                      getPageBuilderConfig.userSettings.language.enable.length === 0)
+                  "
+                >
+                  <template v-for="lang in pageBuilderService.availableLanguage()" :key="lang">
+                    <option :value="lang">{{ lang }}</option>
+                  </template>
+                </template>
+              </select>
+            </div>
+          </template>
+        </template>
+
+        <template v-if="showCloseButton">
+          <div class="pbx-ml-2">
             <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-myPrimaryLinkColor hover:pbx-text-white hover:pbx-fill-white focus-visible:pbx-ring-0"
               @click="
@@ -679,9 +793,10 @@ onMounted(async () => {
             >
               <span class="material-symbols-outlined"> close </span>
             </button>
-          </template>
-        </div>
-        <!-- Options # Start -->
+          </div>
+        </template>
+
+        <!-- Close & Publish buttons end -->
       </div>
 
       <!-- Top Layout Save And Reset Area - End -->
@@ -728,12 +843,11 @@ onMounted(async () => {
           :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-72 pbx-items-center pbx-rounded-full pbx-px-4 pbx-bg-red-200 pbx-h-0"
+            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);
-              border-radius: 9999px;
             "
           >
             <template v-if="getElement">
@@ -751,26 +865,14 @@ onMounted(async () => {
           </div>
           <!-- Element Popover toolbar end -->
 
-          <div
-            id="contains-pagebuilder"
-            class="pbx-pl-4 pbx-pr-4 pbx-pb-4 pbx-pt-1 pbx-h-full pbx-overflow-y-auto"
-          >
-            <div id="pagebuilder" class="pbx-text-black pbx-font-sans">
-              <div ref="draggableZone">
-                <!-- Added Components to DOM # start -->
-                <div
-                  v-for="component in getComponents"
-                  :key="component.id"
-                  id="page-builder-editor-editable-area"
-                  class="pbx-bg-white pbx-grow"
-                >
-                  <div @mouseup="handleSelectComponent(component)" class="pbx-relative group">
-                    <div v-html="component.html_code"></div>
-                  </div>
-                </div>
-                <!-- Added Components to DOM # end -->
-              </div>
-            </div>
+          <div id="pagebuilder" class="pbx-text-black pbx-font-sans">
+            <template v-for="component in getComponents" :key="component.id">
+              <section
+                v-if="component.html_code"
+                v-html="component.html_code"
+                @mouseup="handleSelectComponent(component)"
+              ></section>
+            </template>
           </div>
         </main>
 
@@ -781,7 +883,7 @@ onMounted(async () => {
               await pageBuilderService.clearHtmlSelection()
             }
           "
-          class="pbx-min-w-[3.5rem] pbx-pt-7 pbx-pb-2 pbx-ml-2 pbx-border-l-solid pbx-border-gray-200"
+          class="pbx-min-w-[3rem] pbx-pt-6 pbx-pb-2"
         >
           <div
             @click.self="
@@ -789,15 +891,16 @@ onMounted(async () => {
                 await pageBuilderService.clearHtmlSelection()
               }
             "
-            class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-4"
+            class="pbx-flex pbx-flex-col pbx-items-center pbx-justify-center pbx-gap-2"
           >
             <button
-              type="button"
               v-if="!getMenuRight"
               @click="pageBuilderStateStore.setMenuRight(true)"
-              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"
+              type="button"
+              class="pbx-mySecondaryButton"
             >
-              <span class="material-symbols-outlined"> palette </span>
+              <span class="material-symbols-outlined"> view_sidebar </span>
+              <span> Tools </span>
             </button>
           </div>
         </div>
@@ -806,15 +909,16 @@ onMounted(async () => {
           aria-label="Menu"
           id="pagebuilder-right-area"
           :class="{
-            'pbx-w-0': !getMenuRight,
+            'pbx-w-0 pbx-mr-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 pbx-h-[100vh]"
+          class="pbx-duration-100 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>
         </aside>
       </div>
+
       <div
         class="pbx-flex pbx-items-center pbx-justify-center pbx-p-4 pbx-border-0 pbx-border-t pbx-border-t-gray-200 pbx-border-solid lg:pbx-mx-10"
       >
@@ -828,7 +932,7 @@ onMounted(async () => {
           class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2 pbx-cursor-pointer"
         >
           <span class="lg:pbx-block pbx-hidden">
-            <div class="pbx-whitespace-nowrap">Add to the bottom</div>
+            <div class="pbx-whitespace-nowrap">{{ $t('button.addComponentsToBottom') }}</div>
           </span>
           <div class="pbx-flex pbx-gap-2 pbx-items-center pbx-justify-center">
             <button

package/src/PageBuilder/Preview.vue

@@ -1,13 +1,14 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, watchEffect } from 'vue'
 
-defineProps({
+const props = defineProps({
   mobile: {
     type: Boolean,
   },
 })
 
 const htmlPage = ref('')
+const iframeRef = ref(null)
 
 const previewData = localStorage.getItem('preview')
 
@@ -20,6 +21,23 @@ if (previewData) {
     htmlPage.value = ''
   }
 }
+
+watchEffect(() => {
+  if (props.mobile && iframeRef.value && htmlPage.value) {
+    const iframe = iframeRef.value
+    const doc = iframe.contentWindow.document
+    doc.open()
+    doc.write(
+      `<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body>${htmlPage.value}</body></html>`,
+    )
+    doc.close()
+
+    // Copy stylesheets
+    document.querySelectorAll('link[rel="stylesheet"], style').forEach((node) => {
+      doc.head.appendChild(node.cloneNode(true))
+    })
+  }
+})
 </script>
 
 <template>
@@ -36,13 +54,11 @@ if (previewData) {
   </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>
+      <iframe
+        ref="iframeRef"
+        class="pbx-mx-auto pbx-w-full pbx-bg-white pbx-shadow-lg pbx-h-[80vh] pbx-border-0"
+        src="about:blank"
+      ></iframe>
     </div>
   </template>
 </template>

package/src/composables/builderInstance.ts

@@ -1,15 +1,16 @@
 // builderInstance.ts
 import { PageBuilderService } from '../services/PageBuilderService'
+import type { I18n } from 'vue-i18n'
 import { sharedPageBuilderStore } from '../stores/shared-store'
 
 // Singleton instance
 let instance: PageBuilderService | null = null
 
 // Used to create and store the single instance
-export function initPageBuilder(): PageBuilderService {
+export function initPageBuilder(i18n: I18n): PageBuilderService {
   if (!instance) {
     const pageBuilderStateStore = sharedPageBuilderStore
-    instance = new PageBuilderService(pageBuilderStateStore)
+    instance = new PageBuilderService(pageBuilderStateStore, i18n)
   }
   return instance
 }

package/src/composables/extractCleanHTMLFromPageBuilder.ts

@@ -25,14 +25,15 @@ export function extractCleanHTMLFromPageBuilder(
     }
   })
 
-  if (config && config.pageSettings && typeof config.pageSettings.imageUrlPrefix === 'string') {
-    const imageUrlPrefix = config.pageSettings.imageUrlPrefix
+  if (config && config && typeof config.imageUrlPrefix === 'string') {
+    const imageUrlPrefix = config.imageUrlPrefix
     const imgs = clone.querySelectorAll<HTMLImageElement>('img')
     imgs.forEach((img) => {
       const src = img.getAttribute('src') || ''
       if (
         !src.startsWith('http') &&
-        imageUrlPrefix && // extra safety
+        // extra safety
+        imageUrlPrefix &&
         !src.startsWith(imageUrlPrefix)
       ) {
         img.setAttribute('src', imageUrlPrefix + src.replace(/^\/+/, ''))

package/src/css/app.css

@@ -384,33 +384,10 @@
   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 {
+#pbxEditToolbar {
   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),
@@ -422,28 +399,23 @@
     border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-#editToolbar.is-visible {
+#pbxEditToolbar.is-visible {
   opacity: 1;
   pointer-events: auto;
   transform: translateY(0) scale(1);
-  min-width: 20rem;
-  width: 20rem;
-  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;
+  min-width: 4rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  height: 2.2rem;
 }
 
 /* Manage P, Link, H1, H2 # end */
 
 /* CSS for content inside page builder # start */
+#pagebuilder {
+  position: relative;
+  overflow-y: auto;
+}
 #pagebuilder a {
   pointer-events: none;
 }
@@ -519,38 +491,6 @@
   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;
-}
-
 #pagebuilder[data-global-selected] {
   outline: 4px dashed #b91010 !important;
   outline-offset: -2px !important;

package/src/i18n.ts

@@ -0,0 +1,28 @@
+import { createI18n } from 'vue-i18n'
+
+// Function to load all locale messages from JSON files
+async function loadLocaleMessages() {
+  const locales = import.meta.glob('./locales/*.json')
+  const messages: Record<string, object> = {}
+  for (const path in locales) {
+    const matched = path.match(/([A-Za-z0-9-_]+)\.json$/i)
+    if (matched && matched.length > 1) {
+      const locale = matched[1]
+      const module = (await locales[path]()) as { default: object }
+      messages[locale] = module.default
+    }
+  }
+  return messages
+}
+
+// Use this in main.ts: const i18n = await setupI18n()
+export async function setupI18n() {
+  const messages = await loadLocaleMessages()
+  return createI18n({
+    legacy: false, // you must set `false`, to use Composition API
+    locale: 'en', // set locale
+    fallbackLocale: 'en', // set fallback locale
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    messages: messages as any, // typecast to satisfy vue-i18n
+  })
+}