@myissue/vue-website-page-builder 3.3.56 → 3.3.58

package/package.json

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

@@ -9,6 +9,12 @@ const pageBuilderService = getPageBuilder()
 // Use shared store instance
 const pageBuilderStateStore = sharedPageBuilderStore
 
+defineProps({
+  globalPageLayout: {
+    Type: Boolean,
+  },
+})
+
 const backgroundColor = ref(null)
 const getBackgroundColor = computed(() => {
   return pageBuilderStateStore.getBackgroundColor
@@ -27,8 +33,23 @@ watch(
 <template>
   <Listbox as="div" v-model="backgroundColor">
     <div class="pbx-relative">
-      <div class="pbx-flex pbx-gap-2 pbx-items-center">
+      <div
+        :class="[
+          globalPageLayout
+            ? 'pbx-flex pbx-flex-col pbx-border-solid pbx-border pbx-border-gray-400'
+            : 'pbx-flex pbx-gap-2 pbx-items-center',
+        ]"
+      >
+        <ListboxButton
+          v-if="globalPageLayout"
+          class="pbx-flex pbx-flex-row pbx-justify-between pbx-items-center pbx-pl-3 pbx-pr-3 pbx-py-5 pbx-cursor-pointer pbx-duration-200 hover:pbx-bg-myPrimaryLightGrayColor"
+        >
+          <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-my-0 pbx-py-0">Background Color</p>
+          <span v-if="globalPageLayout" class="material-symbols-outlined"> chevron_right </span>
+        </ListboxButton>
+
         <ListboxButton
+          v-if="!globalPageLayout"
           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"
         >
           <div class="pbx-flex pbx-flex-col">

package/src/Components/PageBuilder/EditorMenu/Editables/ClassEditor.vue

@@ -52,9 +52,7 @@ const handleAddClasses = async () => {
   <EditorAccordion>
     <template #title>Generated CSS</template>
     <template #content>
-      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">CSS applied</p>
-
-      <label class="pbx-myPrimaryInputLabel">
+      <label class="pbx-myPrimaryInputLabel pbx-my-4">
         This is the CSS applied by the builder. Add your own CSS and press Enter to apply it to the
         selected element.
       </label>

package/src/Components/PageBuilder/EditorMenu/Editables/TextColorEditor.vue

@@ -8,6 +8,13 @@ const pageBuilderService = getPageBuilder()
 
 // Use shared store instance
 const pageBuilderStateStore = sharedPageBuilderStore
+
+defineProps({
+  globalPageLayout: {
+    Type: Boolean,
+  },
+})
+
 const textColor = ref(null)
 const getTextColor = computed(() => {
   return pageBuilderStateStore.getTextColor
@@ -26,8 +33,23 @@ watch(
 <template>
   <Listbox as="div" v-model="textColor">
     <div class="pbx-relative">
-      <div class="pbx-flex pbx-gap-2 pbx-items-center">
+      <div
+        :class="[
+          globalPageLayout
+            ? 'pbx-flex pbx-flex-col pbx-border-solid pbx-border pbx-border-gray-400'
+            : 'pbx-flex pbx-gap-2 pbx-items-center',
+        ]"
+      >
+        <ListboxButton
+          v-if="globalPageLayout"
+          class="pbx-flex pbx-flex-row pbx-justify-between pbx-items-center pbx-pl-3 pbx-pr-3 pbx-py-5 pbx-cursor-pointer pbx-duration-200 hover:pbx-bg-myPrimaryLightGrayColor"
+        >
+          <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-my-0 pbx-py-0">Text Color</p>
+          <span v-if="globalPageLayout" class="material-symbols-outlined"> chevron_right </span>
+        </ListboxButton>
+
         <ListboxButton
+          v-if="!globalPageLayout"
           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"
         >
           <div class="pbx-flex pbx-flex-col">

package/src/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue

@@ -9,6 +9,7 @@ import Padding from './Editables/Padding.vue'
 import Margin from './Editables/Margin.vue'
 import BorderRadius from './Editables/BorderRadius.vue'
 import BackgroundColorEditor from './Editables/BackgroundColorEditor.vue'
+import TextColorEditor from './Editables/TextColorEditor.vue'
 import Borders from './Editables/Borders.vue'
 import LinkEditor from './Editables/LinkEditor.vue'
 import TipTap from '../../TipTap/TipTap.vue'
@@ -17,6 +18,9 @@ import ElementEditor from './Editables/ElementEditor.vue'
 import { getPageBuilder } from '../../../composables/builderInstance'
 import EditorAccordion from '../EditorMenu/EditorAccordion.vue'
 import fullHTMLContent from '../../../utils/builder/html-doc-declaration-with-components'
+import ModalBuilder from '../../../Components/Modals/ModalBuilder.vue'
+import { extractCleanHTMLFromPageBuilder } from '../../../composables/extractCleanHTMLFromPageBuilder'
+
 const pageBuilderService = getPageBuilder()
 // Use shared store instance
 const pageBuilderStateStore = sharedPageBuilderStore
@@ -24,7 +28,9 @@ const pageBuilderStateStore = sharedPageBuilderStore
 // emit
 const emit = defineEmits(['closeEditor'])
 
-// get current element tag
+const getComponents = computed(() => {
+  return pageBuilderStateStore.getComponents
+})
 const getElement = computed(() => {
   return pageBuilderStateStore.getElement
 })
@@ -82,18 +88,30 @@ const generateHTML = function (filename, HTML) {
   document.body.removeChild(element)
 }
 
-const getComponents = computed(() => {
-  return pageBuilderStateStore.getComponents
-})
-
-const downloadedComponents = ref(null)
-// handle download HTML
 const handleDownloadHTML = function () {
-  downloadedComponents.value = getComponents.value.map((component) => {
-    return component.html_code
-  })
+  const pagebuilder = document.getElementById('pagebuilder')
+  if (!pagebuilder) {
+    return
+  }
+
+  const html = extractCleanHTMLFromPageBuilder(pagebuilder)
+
+  generateHTML('downloaded_html.html', html)
+}
+const showModalGlobalPageStyles = ref(null)
 
-  generateHTML('downloaded_html.html', downloadedComponents.value.join(''))
+const handleUpdatePageStyles = async function () {
+  showModalGlobalPageStyles.value = true
+
+  await pageBuilderService.globalPageStyles()
+}
+const handleCloseGlobalPageStyles = async function () {
+  // Remove global highlight if present
+  const pagebuilder = document.querySelector('#pagebuilder')
+  if (pagebuilder) {
+    pagebuilder.removeAttribute('data-global-selected')
+  }
+  showModalGlobalPageStyles.value = false
 }
 </script>
 
@@ -152,26 +170,89 @@ const handleDownloadHTML = function () {
         </article>
       </div>
 
-      <article class="pbx-my-1 pbx-bg-white">
+      <!-- Global Page Styles -->
+      <article
+        v-if="Array.isArray(getComponents) && getComponents.length >= 1"
+        class="pbx-my-1 pbx-bg-white"
+      >
         <EditorAccordion>
-          <template #title>Download HTML</template>
+          <template #title>Global Page Styles</template>
           <template #content>
-            <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">
-              Download Page as HTML
-            </p>
+            <label class="pbx-myPrimaryInputLabel pbx-my-4">
+              Apply styles that affect the entire page. These settings include global font family,
+              text color, background color, and other universal styles that apply to all sections.
+            </label>
 
+            <div class="pbx-mt-4">
+              <button @click="handleUpdatePageStyles" type="button" class="pbx-myPrimaryButton">
+                Update Page Styles
+              </button>
+            </div>
+          </template>
+        </EditorAccordion>
+      </article>
+      <!-- Global Page Styles -->
+
+      <!-- Download Layout HTML -->
+      <article
+        v-if="Array.isArray(getComponents) && getComponents.length >= 1"
+        class="pbx-my-1 pbx-bg-white"
+      >
+        <EditorAccordion>
+          <template #title>Download HTML</template>
+          <template #content>
+            <label class="pbx-myPrimaryInputLabel pbx-my-4">
+              Export the entire page as a standalone HTML file. This includes all sections, content,
+              and applied styles, making it ready for use or integration elsewhere.
+            </label>
             <div class="pbx-mt-4">
               <button @click="handleDownloadHTML" type="button" class="pbx-myPrimaryButton">
                 Download HTML file
               </button>
             </div>
           </template>
-
-          <!-- Download Layout HTML - end -->
         </EditorAccordion>
+        <!-- Download Layout HTML -->
       </article>
-
-      <article class="pbx-mt-1 pbx-bg-white"></article>
     </div>
+
+    <ModalBuilder
+      maxWidth="md"
+      minHeight="pbx-h-[90vh]"
+      :showModalBuilder="showModalGlobalPageStyles"
+      title="Global Page Styles"
+      @closeMainModalBuilder="handleCloseGlobalPageStyles"
+    >
+      <div class="pbx-min-h-[90vh] pbx-flex pbx-flex-col pbx-gap-2 pbx-pt-4 pbx-pb-2">
+        <p class="pbx-myPrimaryParagraph">
+          Apply styles that affect the entire page. These settings include global font family, text
+          color, background color, and other universal styles that apply to all sections.
+        </p>
+        <article class="pbx-my-1 pbx-bg-gray-100">
+          <Typography></Typography>
+        </article>
+        <article class="pbx-my-1 pbx-bg-gray-100">
+          <TextColorEditor :globalPageLayout="true"></TextColorEditor>
+        </article>
+        <article class="pbx-my-1 pbx-bg-gray-100">
+          <BackgroundColorEditor :globalPageLayout="true"></BackgroundColorEditor>
+        </article>
+        <article class="pbx-my-1 pbx-bg-gray-100">
+          <Padding> </Padding>
+        </article>
+        <article class="pbx-my-1 pbx-bg-gray-100">
+          <Margin> </Margin>
+        </article>
+        <article class="pbx-my-1 pbx-bg-gray-100">
+          <BorderRadius></BorderRadius>
+        </article>
+        <article class="pbx-my-1 pbx-bg-gray-100">
+          <Borders></Borders>
+        </article>
+        <article class="pbx-my-1 pbx-bg-gray-100">
+          <ClassEditor></ClassEditor>
+        </article>
+      </div>
+    </ModalBuilder>
   </div>
 </template>

package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue

@@ -9,7 +9,7 @@ import { preloadImage } from '../../../composables/preloadImage'
 import DynamicModalBuilder from '../../Modals/DynamicModalBuilder.vue'
 
 import { getPageBuilder } from '../../../composables/builderInstance'
-import { delay } from '@/composables/delay'
+import { delay } from '../../../composables/delay'
 const pageBuilderService = getPageBuilder()
 
 // Use shared store instance

package/src/DemoComponents/HomeSection.vue

@@ -61,7 +61,7 @@ const configPageBuilder = {
     image: '/jane_doe.jpg',
   },
   updateOrCreate: {
-    formType: 'update',
+    formType: 'create',
     formName: 'collection',
   },
   pageBuilderLogo: {
@@ -79,6 +79,14 @@ const configPageBuilder = {
   settings: {
     brandColor: '#DB93B0',
   },
+  // pageSettings: {
+  //   classes:
+  //     'pbx-font-didot pbx-italic pbx-px-20 pbx-rounded-full pbx-rounded-tr-full pbx-border-8 pbx-border-green-800 pbx-border-solid pbx-text-neutral-300 pbx-bg-stone-700',
+  //   style: {
+  //     backgroundColor: 'red',
+  //     border: '6px solid yellow',
+  //   },
+  // },
 } as const
 
 onMounted(async () => {

package/src/PageBuilder/PageBuilder.vue

@@ -232,7 +232,7 @@ const handlerRumeEditingForUpdate = async function () {
   secondModalButtonResumeEditingFunction.value = function () {}
 
   thirdModalButtonResumeEditingFunction.value = async function () {
-    await pageBuilderService.resumeEditingForUpdate()
+    await pageBuilderService.resumeEditingFromDraft()
     pageBuilderStateStore.setHasLocalDraftForUpdate(false)
 
     showModalResumeEditing.value = false
@@ -330,7 +330,7 @@ function updatePanelPosition() {
 }
 
 onMounted(async () => {
-  await pageBuilderService.tryMountPendingComponents()
+  await pageBuilderService.completeBuilderInitialization()
 
   updatePanelPosition()
 
@@ -755,7 +755,7 @@ onMounted(async () => {
             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">
+            <div id="pagebuilder" class="pbx-text-black pbx-font-sans">
               <div ref="draggableZone">
                 <!-- Added Components to DOM # start -->
                 <div

package/src/PageBuilder/Preview.vue

@@ -13,14 +13,12 @@ const previewData = localStorage.getItem('preview')
 
 if (previewData) {
   try {
-    const parsedData = JSON.parse(previewData)
-    htmlPage.value = Array.isArray(parsedData) ? parsedData.join('') : ''
-  } catch (error) {
-    console.error('Error parsing preview data:', error)
+    const parsed = JSON.parse(previewData)
+    htmlPage.value = Array.isArray(parsed) ? parsed.join('') : ''
+  } catch (err) {
+    console.error('Invalid preview data:', err)
     htmlPage.value = ''
   }
-} else {
-  htmlPage.value = ''
 }
 </script>