@myissue/vue-website-page-builder 3.2.81 → 3.2.83

package/package.json

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

@@ -17,7 +17,7 @@ watch(
   getBackgroundColor,
   async (newValue) => {
     backgroundColor.value = newValue
-    await pageBuilderClass.handlePageBuilderMethods()
+    await pageBuilderClass.initializeElementStyles()
   },
   { immediate: true },
 )

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

@@ -34,7 +34,7 @@ watch(
   getBorderRadiusGlobal,
   async (newValue) => {
     borderRadiusGlobal.value = newValue
-    await pageBuilderClass.handlePageBuilderMethods()
+    await pageBuilderClass.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -42,7 +42,7 @@ watch(
   getBorderRadiusTopLeft,
   async (newValue) => {
     borderRadiusTopLeft.value = newValue
-    await pageBuilderClass.handlePageBuilderMethods()
+    await pageBuilderClass.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -50,7 +50,7 @@ watch(
   getBorderRadiusTopRight,
   async (newValue) => {
     borderRadiusTopRight.value = newValue
-    await pageBuilderClass.handlePageBuilderMethods()
+    await pageBuilderClass.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -58,7 +58,7 @@ watch(
   getBorderRadiusBottomleft,
   async (newValue) => {
     borderRadiusBottomleft.value = newValue
-    await pageBuilderClass.handlePageBuilderMethods()
+    await pageBuilderClass.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -66,7 +66,7 @@ watch(
   getBorderRadiusBottomRight,
   async (newValue) => {
     borderRadiusBottomRight.value = newValue
-    await pageBuilderClass.handlePageBuilderMethods()
+    await pageBuilderClass.initializeElementStyles()
   },
   { immediate: true },
 )

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

@@ -28,7 +28,7 @@ watch(
   getBorderStyle,
   async (newValue) => {
     borderStyle.value = newValue
-    await pageBuilderClass.handlePageBuilderMethods()
+    await pageBuilderClass.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -36,7 +36,7 @@ watch(
   getBorderWidth,
   async (newValue) => {
     borderWidth.value = newValue
-    await pageBuilderClass.handlePageBuilderMethods()
+    await pageBuilderClass.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -44,7 +44,7 @@ watch(
   getBorderColor,
   async (newValue) => {
     borderColor.value = newValue
-    await pageBuilderClass.handlePageBuilderMethods()
+    await pageBuilderClass.initializeElementStyles()
   },
   { immediate: true },
 )

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

@@ -25,7 +25,7 @@ const inputClass = ref('')
 
 const handleAddClasses = async function () {
   pageBuilderClass.handleAddClasses(inputClass.value)
-  await pageBuilderClass.handlePageBuilderMethods()
+  await pageBuilderClass.initializeElementStyles()
 
   inputClass.value = ''
 }
@@ -43,7 +43,7 @@ const handleAddClasses = async function () {
           @click="
             async () => {
               pageBuilderClass.handleRemoveClasses(className)
-              await pageBuilderClass.handlePageBuilderMethods()
+              await pageBuilderClass.initializeElementStyles()
             }
           "
         >

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

@@ -23,7 +23,7 @@ const thirdModalButtonFunctionDynamicModalBuilder = ref(null)
 const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
 // remove component
-const deleteComponent = function (e) {
+const deleteSelectedComponent = function (e) {
   showModalDeleteComponent.value = true
   typeModal.value = 'delete'
   gridColumnModal.value = 2
@@ -40,7 +40,7 @@ const deleteComponent = function (e) {
   //
   // handle click
   thirdModalButtonFunctionDynamicModalBuilder.value = function () {
-    pageBuilderClass.deleteComponent()
+    pageBuilderClass.deleteSelectedComponent()
 
     showModalDeleteComponent.value = false
   }
@@ -68,7 +68,7 @@ const deleteComponent = function (e) {
   <div class="flex flex-col items-center justify-center myPrimaryGap">
     <div class="flex gap-2 items-center justify-center">
       <div
-        @click="deleteComponent()"
+        @click="deleteSelectedComponent()"
         class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryErrorColor hover:text-white text-myPrimaryErrorColor"
       >
         <span class="material-symbols-outlined"> delete_forever </span>
@@ -77,14 +77,14 @@ const deleteComponent = function (e) {
 
     <button
       type="button"
-      @click="pageBuilderClass.moveComponent(-1)"
+      @click="pageBuilderClass.reorderComponent(-1)"
       class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
     >
       <span class="material-symbols-outlined"> move_up </span>
     </button>
     <button
       type="button"
-      @click="pageBuilderClass.moveComponent(1)"
+      @click="pageBuilderClass.reorderComponent(1)"
       class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
     >
       <span class="material-symbols-outlined"> move_down </span>

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

@@ -276,7 +276,7 @@ const handleModalIframeSrc = function () {
 
         <template
           v-if="
-            pageBuilderClass.selectedElementIsValidText() &&
+            pageBuilderClass.isSelectedElementValidText() &&
             !pageBuilderClass.ElOrFirstChildIsIframe()
           "
         >

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

@@ -24,7 +24,7 @@ watch(
   getBackgroundOpacity,
   async (newValue) => {
     opacityVueModel.value = newValue
-    await pageBuilderClass.handlePageBuilderMethods()
+    await pageBuilderClass.initializeElementStyles()
   },
   { immediate: true },
 )

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

@@ -24,7 +24,7 @@ watch(
   getOpacity,
   async (newValue) => {
     opacityVueModel.value = newValue
-    await pageBuilderClass.handlePageBuilderMethods()
+    await pageBuilderClass.initializeElementStyles()
   },
   { immediate: true },
 )

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

@@ -30,7 +30,7 @@ watch(
   getFontVerticalPadding,
   async (newValue) => {
     fontVerticalPadding.value = newValue
-    await pageBuilderClass.handlePageBuilderMethods()
+    await pageBuilderClass.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -38,7 +38,7 @@ watch(
   getFontHorizontalPadding,
   async (newValue) => {
     fontHorizontalPadding.value = newValue
-    await pageBuilderClass.handlePageBuilderMethods()
+    await pageBuilderClass.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -46,7 +46,7 @@ watch(
   getFontVerticalMargin,
   async (newValue) => {
     fontVerticalMargin.value = newValue
-    await pageBuilderClass.handlePageBuilderMethods()
+    await pageBuilderClass.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -54,7 +54,7 @@ watch(
   getFontHorizontalMargin,
   async (newValue) => {
     fontHorizontalMargin.value = newValue
-    await pageBuilderClass.handlePageBuilderMethods()
+    await pageBuilderClass.initializeElementStyles()
   },
   { immediate: true },
 )

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

@@ -17,7 +17,7 @@ watch(
   getTextColor,
   async (newValue) => {
     textColor.value = newValue
-    await pageBuilderClass.handlePageBuilderMethods()
+    await pageBuilderClass.initializeElementStyles()
   },
   { immediate: true },
 )

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

@@ -43,7 +43,7 @@ watch(
   getFontBase,
   async (newValue) => {
     fontBase.value = newValue
-    await pageBuilderClass.handlePageBuilderMethods()
+    await pageBuilderClass.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -51,7 +51,7 @@ watch(
   getFontDesktop,
   async (newValue) => {
     fontDesktop.value = newValue
-    await pageBuilderClass.handlePageBuilderMethods()
+    await pageBuilderClass.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -59,7 +59,7 @@ watch(
   getFontTablet,
   async (newValue) => {
     fontTablet.value = newValue
-    await pageBuilderClass.handlePageBuilderMethods()
+    await pageBuilderClass.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -67,7 +67,7 @@ watch(
   getFontMobile,
   async (newValue) => {
     fontMobile.value = newValue
-    await pageBuilderClass.handlePageBuilderMethods()
+    await pageBuilderClass.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -75,7 +75,7 @@ watch(
   getFontWeight,
   async (newValue) => {
     fontWeight.value = newValue
-    await pageBuilderClass.handlePageBuilderMethods()
+    await pageBuilderClass.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -83,7 +83,7 @@ watch(
   getFontFamily,
   async (newValue) => {
     fontFamily.value = newValue
-    await pageBuilderClass.handlePageBuilderMethods()
+    await pageBuilderClass.initializeElementStyles()
   },
   { immediate: true },
 )
@@ -91,7 +91,7 @@ watch(
   getFontStyle,
   async (newValue) => {
     fontStyle.value = newValue
-    await pageBuilderClass.handlePageBuilderMethods()
+    await pageBuilderClass.initializeElementStyles()
   },
   { immediate: true },
 )

package/src/Components/TipTap/TipTap.vue

@@ -11,7 +11,7 @@ const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 <template>
   <div>
     <div class="blockease-linear duration-200 block ease-linear">
-      <template v-if="pageBuilderClass.selectedElementIsValidText()">
+      <template v-if="pageBuilderClass.isSelectedElementValidText()">
         <div class="flex items-center justify-center mb-6">
           <div class="px-2 flex items-center justify-start gap-2 w-max">
             <button

package/src/Components/TipTap/TipTapInput.vue

@@ -69,7 +69,7 @@ const editor = useEditor({
 
 // watch for changes in textContent and update store and textContentVueModel
 watch(textContent, async (newValue) => {
-  if (!pageBuilderClass.selectedElementIsValidText()) return
+  if (!pageBuilderClass.isSelectedElementValidText()) return
 
   if (getElement.value) {
     pageBuilderStateStore.setTextAreaVueModel(newValue)
@@ -81,7 +81,7 @@ watch(textContent, async (newValue) => {
 })
 
 const TipTapSetContent = function () {
-  if (!pageBuilderClass.selectedElementIsValidText()) return
+  if (!pageBuilderClass.isSelectedElementValidText()) return
 
   if (editor.value) {
     editor.value.commands.setContent(getElement.value.innerHTML)
@@ -208,7 +208,7 @@ onMounted(() => {
     </DynamicModalBuilder>
 
     <div class="blockease-linear duration-200 block ease-linear">
-      <div v-if="pageBuilderClass.selectedElementIsValidText() && editor">
+      <div v-if="pageBuilderClass.isSelectedElementValidText() && editor">
         <div class="relative rounded-lg">
           <div
             class="flex justify-between myPrimaryGap items-center py-4 px-4 overflow-x-auto border-b border-gray-200"

package/src/DemoComponents/DemoUnsplash.vue

@@ -112,17 +112,8 @@ const applySelectedImage = async function (imageURL) {
 
 // on mounted
 onMounted(async () => {
-  let term = ''
-  let page = 1
-  if (localStorage.getItem('unsplash-query') && localStorage.getItem('unsplash-query').length > 0) {
-    term = getSearchTerm.value = localStorage.getItem('unsplash-query')
-    page = getCurrentPageNumber.value = localStorage.getItem('unsplash-page')
-    fetchUnsplash()
-  }
-
-  term ? getSearchTerm.value : 'Magazine'
-  page ? getCurrentPageNumber.value : 1
-  fetchUnsplash()
+  getSearchTerm.value = localStorage.getItem('unsplash-query') || 'Magazine'
+  getCurrentPageNumber.value = Number(localStorage.getItem('unsplash-page')) || 1
 
   await fetchUnsplash()
 })

package/src/DemoComponents/HomeSection.vue

@@ -71,7 +71,7 @@ const configPageBuilder = {
     image: '/jane_doe.jpg',
   },
   updateOrCreate: {
-    formType: 'update' as 'update',
+    formType: 'create' as 'create',
     formName: 'news',
   },
   pageBuilderLogo: {
@@ -91,18 +91,18 @@ const configPageBuilder = {
   },
 }
 
-pageBuilderClass.setConfigPageBuilder(configPageBuilder)
+pageBuilderClass.applyPageBuilderConfig(configPageBuilder)
 
 onMounted(async () => {
   if (typeof getLocalStorageItemName.value === 'string' && getLocalStorageItemName.value) {
     const value = localStorage.getItem(getLocalStorageItemName.value)
 
     if (value) {
-      pageBuilderClass.loadExistingContent(JSON.stringify(value))
+      pageBuilderClass.mountComponentsToDOM(JSON.stringify(value))
     } else {
-      pageBuilderClass.loadExistingContent(JSON.stringify(html), true)
-      // pageBuilderClass.loadExistingContent(rawHTML, true)
-      // pageBuilderClass.loadExistingContent(JSON.stringify(oldhtmlfromdb), true)
+      pageBuilderClass.mountComponentsToDOM(JSON.stringify(html), true)
+      // pageBuilderClass.mountComponentsToDOM(rawHTML, true)
+      // pageBuilderClass.mountComponentsToDOM(JSON.stringify(oldhtmlfromdb), true)
     }
   }
 })

package/src/PageBuilder/PageBuilder.vue

@@ -132,7 +132,6 @@ const getElementAttributes = computed(() => {
 })
 
 const debounce = useDebounce()
-const debounceManual = useDebounce()
 
 watch(getElementAttributes, async (newAttributes, oldAttributes) => {
   // Only run if attributes actually changed
@@ -145,8 +144,7 @@ watch(getElementAttributes, async (newAttributes, oldAttributes) => {
   ) {
     debounce(async () => {
       await pageBuilderClass.handleAutoSave()
-      await pageBuilderClass.handlePageBuilderMethods()
-      // await pageBuilderClass.setEventListenersForElements()
+      await pageBuilderClass.initializeElementStyles()
     }, 200)
   }
 })
@@ -171,7 +169,7 @@ const handleConfig = function (config) {
     config === undefined ||
     (config && Object.keys(config).length === 0 && config.constructor === Object)
   ) {
-    pageBuilderClass.setConfigPageBuilder(defaultConfigValues)
+    pageBuilderClass.applyPageBuilderConfig(defaultConfigValues)
     return
   }
 
@@ -188,7 +186,7 @@ watch(
     pageBuilderClass.updateLocalStorageItemName()
 
     if (config && config.updateOrCreate && config.updateOrCreate.formType === 'create') {
-      pageBuilderClass.loadExistingContent()
+      pageBuilderClass.mountComponentsToDOM()
     }
   },
   { immediate: true },
@@ -245,7 +243,7 @@ onMounted(async () => {
 
   await pageBuilderClass.clearHtmlSelection()
 
-  await pageBuilderClass.setEventListenersForElements()
+  await pageBuilderClass.addListenersToEditableElements()
 
   if (await pageBuilderClass.hasLocalDraftForUpdate()) {
     handlerRumeEditingForUpdate()

package/src/composables/PageBuilderClass.ts

@@ -108,8 +108,8 @@ class PageBuilderClass {
     await this.#removeHoveredAndSelected()
   }
   // Load existing content from HTML when in update mode
-  setConfigPageBuilder(data: PageBuilderConfig): void {
-    this.pageBuilderStateStore.setConfigPageBuilder(data)
+  applyPageBuilderConfig(data: PageBuilderConfig): void {
+    this.pageBuilderStateStore.applyPageBuilderConfig(data)
   }
 
   #applyElementClassChanges(
@@ -248,7 +248,7 @@ class PageBuilderClass {
    * The function is used to
    * attach event listeners to each element within a 'section'
    */
-  setEventListenersForElements = async () => {
+  addListenersToEditableElements = async () => {
     const elementsWithListeners = new WeakSet<Element>()
 
     const pagebuilder = document.querySelector('#pagebuilder')
@@ -400,9 +400,6 @@ class PageBuilderClass {
         section.setAttribute('data-component-title', clonedComponent.title)
       }
 
-      // Find all images within elements with "flex" or "grid" classes inside the section
-      const images = section.querySelectorAll('img')
-
       // Update the clonedComponent id with the newly generated unique ID
       clonedComponent.id = section.dataset.componentid
 
@@ -433,7 +430,7 @@ class PageBuilderClass {
     }
   }
 
-  async currentClasses() {
+  async #syncCurrentClasses() {
     await new Promise((resolve) => requestAnimationFrame(resolve))
 
     // convert classList to array
@@ -498,7 +495,7 @@ class PageBuilderClass {
 
     // if parent element tag is section remove the hole component
     if (element.parentElement?.tagName === 'SECTION') {
-      this.deleteComponent()
+      this.deleteSelectedComponent()
     }
 
     // Remove the element from the DOM
@@ -530,7 +527,7 @@ class PageBuilderClass {
     this.pageBuilderStateStore.setComponent(null)
     this.pageBuilderStateStore.setElement(null)
 
-    await this.setEventListenersForElements()
+    await this.addListenersToEditableElements()
   }
 
   handleFontWeight(userSelectedFontWeight?: string): void {
@@ -773,7 +770,7 @@ class PageBuilderClass {
     this.pageBuilderStateStore.setComponents([])
   }
 
-  deleteComponent() {
+  deleteSelectedComponent() {
     if (!this.getComponents.value || !this.getComponent.value) return
 
     // Find the index of the component to delete
@@ -796,7 +793,7 @@ class PageBuilderClass {
 
   // move component
   // runs when html components are rearranged
-  moveComponent(direction: number): void {
+  reorderComponent(direction: number): void {
     if (!this.getComponents.value || !this.getComponent.value) return
 
     if (this.getComponents.value.length <= 1) return
@@ -884,7 +881,7 @@ class PageBuilderClass {
   //
   //
   //
-  selectedElementIsValidText() {
+  isSelectedElementValidText() {
     let reachedElseStatement = false
 
     // Get all child elements of the parentDiv
@@ -1269,7 +1266,7 @@ class PageBuilderClass {
               this.pageBuilderStateStore.setComponents(parsed.components)
               localStorage.removeItem(key)
               await nextTick()
-              await this.setEventListenersForElements()
+              await this.addListenersToEditableElements()
               await this.handleAutoSave()
             }
           } catch (e) {
@@ -1283,7 +1280,7 @@ class PageBuilderClass {
   getStorageItemNameForResource(): string | null {
     return this.getLocalStorageItemName.value
   }
-  areComponentsStoredInLocalStorage() {
+  loadStoredComponentsFromStorage() {
     if (!this.getLocalStorageItemName.value) return false
 
     if (
@@ -1302,7 +1299,7 @@ class PageBuilderClass {
   }
   //
   //
-  async updateBasePrimaryImage(data?: { type: string }): Promise<void> {
+  async updateBasePrimaryImage(): Promise<void> {
     if (!this.getElement.value) return
 
     // If no data provided, apply current image if available (new simplified usage)
@@ -1313,7 +1310,7 @@ class PageBuilderClass {
     }
   }
 
-  showBasePrimaryImage() {
+  setBasePrimaryImageFromCurrent() {
     if (!this.getElement.value) return
 
     const currentImageContainer = document.createElement('div')
@@ -1521,7 +1518,7 @@ class PageBuilderClass {
 
       // Wait for the DOM to update before setting event listeners
       await nextTick()
-      await this.setEventListenersForElements()
+      await this.addListenersToEditableElements()
       await this.handleAutoSave()
     } catch (error) {
       console.error('Error adding component:', error)
@@ -1663,7 +1660,7 @@ class PageBuilderClass {
   }
 
   // Load existing content from HTML when in update mode
-  loadExistingContent(data?: string, injectCustomHTMLSections?: boolean): void {
+  mountComponentsToDOM(data?: string, injectCustomHTMLSections?: boolean): void {
     this.pageBuilderStateStore.setComponents([])
 
     if (!this.pageBuilderStateStore.getConfigPageBuilder) return
@@ -1672,7 +1669,7 @@ class PageBuilderClass {
       this.setComponentsFromData(data)
     }
 
-    const storedData = this.areComponentsStoredInLocalStorage()
+    const storedData = this.loadStoredComponentsFromStorage()
 
     if (
       this.pageBuilderStateStore.getConfigPageBuilder &&
@@ -1705,7 +1702,7 @@ class PageBuilderClass {
     }
   }
 
-  async handlePageBuilderMethods(): Promise<void> {
+  async initializeElementStyles(): Promise<void> {
     await new Promise((resolve) => requestAnimationFrame(resolve))
 
     // handle custom URL
@@ -1715,7 +1712,7 @@ class PageBuilderClass {
     // handle BG opacity
     this.handleBackgroundOpacity(undefined)
     // displayed image
-    this.showBasePrimaryImage()
+    this.setBasePrimaryImageFromCurrent()
     // border style
     this.handleBorderStyle(undefined)
     // border width
@@ -1753,7 +1750,7 @@ class PageBuilderClass {
     // handle text color
     this.handleTextColor(undefined)
     // handle classes
-    await this.currentClasses()
+    await this.#syncCurrentClasses()
   }
 }
 

package/src/helpers/passedPageBuilderConfig.ts

@@ -23,7 +23,7 @@ export const updateOrCreateIsFalsy = function (config: PageBuilderConfig) {
       },
     }
 
-    pageBuilderClass.setConfigPageBuilder(updatedConfig)
+    pageBuilderClass.applyPageBuilderConfig(updatedConfig)
     return true
   }
 
@@ -43,7 +43,7 @@ export const updateOrCreateIsFalsy = function (config: PageBuilderConfig) {
       },
     } as const
 
-    pageBuilderClass.setConfigPageBuilder(updatedConfig)
+    pageBuilderClass.applyPageBuilderConfig(updatedConfig)
     return true
   }
 
@@ -65,7 +65,7 @@ export const updateOrCreateIsFalsy = function (config: PageBuilderConfig) {
       },
     }
 
-    pageBuilderClass.setConfigPageBuilder(updatedConfig)
+    pageBuilderClass.applyPageBuilderConfig(updatedConfig)
     return true
   }
 }

package/src/stores/page-builder-state.ts

@@ -436,7 +436,7 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
       localStorage.setItem('preview', payload)
     },
 
-    setConfigPageBuilder(payload: PageBuilderConfig | null): void {
+    applyPageBuilderConfig(payload: PageBuilderConfig | null): void {
       this.configPageBuilder = payload
     },