@myissue/vue-website-page-builder 3.0.33 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "v3.0.33",
+  "version": "v3.1.0",
   "description": "🚧 DEVELOPMENT VERSION - Vue.js page builder component with drag & drop functionality. Not ready for production use.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

package/src/Components/Modals/MediaLibraryModal.vue

@@ -7,7 +7,7 @@ import {
   TransitionRoot,
 } from '@headlessui/vue'
 import { provide } from 'vue'
-import NoneCustomMediaLibraryComponent from '@/Components/PageBuilder/NoneCustomMediaLibraryComponent.vue'
+import NoneCustomMediaLibraryComponent from '@/Components/PageBuilder/DemoContent/NoneCustomMediaLibraryComponent.vue'
 
 const props = defineProps({
   title: {

package/src/Components/PageBuilder/{NoneCustomSearchComponent.vue → DemoContent/NoneCustomSearchComponent.vue}

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import componentHelpers from '../../utils/html-elements/componentHelpers'
-import components from '../../utils/html-elements/component'
-import PageBuilderClass from '../../composables/PageBuilderClass'
-import { usePageBuilderModal } from '../../composables/usePageBuilderModal'
-import { generateComponentPreview } from '../../utils/componentPreviews'
-import type { ComponentObject } from '../../types'
-import { usePageBuilderStateStore } from '../../stores/page-builder-state'
+import componentHelpers from '../../../utils/html-elements/componentHelpers'
+import components from '../../../utils/html-elements/component'
+import PageBuilderClass from '../../../composables/PageBuilderClass'
+import { usePageBuilderModal } from '../../../composables/usePageBuilderModal'
+import { generateComponentPreview } from '../../../utils/componentPreviews'
+import type { ComponentObject } from '../../../types'
+import { usePageBuilderStateStore } from '../../../stores/page-builder-state'
 import type { Pinia } from 'pinia'
 
 import { inject } from 'vue'
@@ -75,8 +75,8 @@ const getSvgPreview = (title: string) => {
           @click="handleDropComponent(helper)"
         >
           <div class="max-h-72 cursor-pointer object-contain bg-white mx-auto">
-            <div class="mr-2" v-html="helper.icon"></div>
-            <h4 class="myPrimaryParagraph text-sm font-normal">{{ helper.title }}</h4>
+            <div v-if="false" class="mr-2" v-html="helper.icon"></div>
+            <h4 class="myPrimaryParagraph text-base font-medium">{{ helper.title }}</h4>
           </div>
           <div class="myPrimaryParagraph text-xs font-normal pt-2">
             Click to add {{ helper.title.toLowerCase() }} component

package/src/Components/PageBuilder/DropdownsPlusToggles/OptionsDropdown.vue

@@ -79,14 +79,14 @@ const deleteAllComponents = function () {
 
 // handle slideover window
 const handleSettingsSlideOver = function () {
-  pageBuilderStateStore.setComponent(null)
+  // pageBuilderStateStore.setComponent(null)
 
   titleSettingsSlideOverRight.value = 'Settings'
   showSettingsSlideOverRight.value = true
 }
 // handle slideover window
 const settingsSlideOverButton = function () {
-  pageBuilderStateStore.setComponent(null)
+  // pageBuilderStateStore.setComponent(null)
 
   showSettingsSlideOverRight.value = false
 }

package/src/Components/PageBuilder/Settings/AdvancedPageBuilderSettings.vue

@@ -99,6 +99,12 @@ const updateCurrentTab = function (tab) {
           </div>
           <div class="px-4 pb-8 pt-4 text-white text-xs break-all">
             <div v-if="current === 'element'">
+              <p>eeeer: {{ getElement }}</p>
+              <div v-if="!getComponent">
+                <p class="pb-2">
+                  {{ getComponent === null ? 'NULL' : typeof getComponent }}
+                </p>
+              </div>
               <div v-if="getElement">
                 <div class="flex flex-col gap-4 border-b border-white mb-4 pb-4">
                   <p>Selected element outerHTML:</p>

package/src/Components/Search/SearchComponents.vue

@@ -1,6 +1,6 @@
 <script setup>
 import Modal from '@/Components/Modals/Modal.vue'
-import NoneCustomSearchComponent from '@/Components/PageBuilder/NoneCustomSearchComponent.vue'
+import NoneCustomSearchComponent from '@/Components/PageBuilder/DemoContent/NoneCustomSearchComponent.vue'
 
 const props = defineProps({
   firstButtonText: {

package/src/PageBuilder/PageBuilder.vue

@@ -215,6 +215,7 @@ onMounted(async () => {
   //
 
   pageBuilderClass.loadExistingContent()
+  pageBuilderClass.removeHoveredAndSelected()
 })
 </script>
 
@@ -438,12 +439,12 @@ onMounted(async () => {
                     @click="pageBuilderStateStore.setMenuRight(true)"
                   >
                     <div class="flex items-center justify-center gap-2">
-                      <span class="lg:block hidden"> Design </span>
+                      <span class="lg:block hidden"> Styling </span>
 
                       <span
                         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="myMediumIcon material-symbols-outlined"> palette </span>
+                        <span class="myMediumIcon material-symbols-outlined"> tune </span>
                       </span>
                     </div>
                   </button>

package/src/composables/PageBuilderClass.ts

@@ -128,36 +128,53 @@ class PageBuilderClass {
   }
 
   #applyElementClassChanges(
-    selectedCSS: string,
+    selectedCSS: string | undefined,
     CSSArray: string[],
     mutationName: string,
   ): string | undefined {
+    //
+    //
     if (this.showRunningMethodLogs) {
       console.log('#applyElementClassChanges')
     }
 
+    const currentHTMLElement = this.getElement.value
+    if (!currentHTMLElement) return
+
+    // currentCSS array example: ["none","py-0", "py-2", ...] or ['none', 'rounded-sm', 'rounded', 'rounded-md', ...]
     const currentCSS = CSSArray.find((CSS) => {
-      return this.getElement.value?.classList.contains(CSS)
+      return currentHTMLElement.classList.contains(CSS)
     })
 
     // set to 'none' if undefined
-    let elementClass =
-      currentCSS || 'none'(this.pageBuilderStateStore as any)[mutationName](elementClass)
+    let elementClass = currentCSS || 'none'
+
+    // If selectedCSS is undefined, just set the current state and return
+    if (selectedCSS === undefined) {
+      if (typeof mutationName === 'string' && mutationName.length > 2) {
+        ;(this.pageBuilderStateStore as any)[mutationName](elementClass)
+      }
+      return currentCSS
+    }
 
+    // selectedCSS examples: bg-zinc-200, px-10, rounded-full etc.
     if (typeof selectedCSS === 'string' && selectedCSS !== 'none') {
-      if (elementClass && this.getElement.value?.classList.contains(elementClass)) {
-        this.getElement.value?.classList.remove(elementClass)
+      if (elementClass && currentHTMLElement.classList.contains(elementClass)) {
+        currentHTMLElement.classList.remove(elementClass)
       }
 
-      this.getElement.value?.classList.add(selectedCSS)
+      currentHTMLElement.classList.add(selectedCSS)
       elementClass = selectedCSS
     } else if (typeof selectedCSS === 'string' && selectedCSS === 'none' && elementClass) {
-      this.getElement.value?.classList.remove(elementClass)
+      currentHTMLElement.classList.remove(elementClass)
       elementClass = selectedCSS
     }
 
-    this.pageBuilderStateStore[mutationName as keyof PageBuilderStateStore](elementClass)
-    this.pageBuilderStateStore.setElement(this.getElement.value)
+    // Only call store mutations after all DOM manipulation is complete
+    if (typeof mutationName === 'string' && mutationName.length > 2) {
+      ;(this.pageBuilderStateStore as any)[mutationName](elementClass)
+      this.pageBuilderStateStore.setElement(currentHTMLElement)
+    }
 
     return currentCSS
   }
@@ -413,27 +430,36 @@ class PageBuilderClass {
     return clonedComponent
   }
 
-  removeHoveredAndSelected() {
+  async removeHoveredAndSelected() {
     if (this.showRunningMethodLogs) {
       console.log('removeHoveredAndSelected')
     }
 
-    const hoveredElement = document.querySelector('[hovered]')
+    await new Promise((resolve) => requestAnimationFrame(resolve))
+
+    const pagebuilder = document.querySelector('#pagebuilder')
+
+    if (!pagebuilder) return
+
+    const hoveredElement = pagebuilder.querySelector('[hovered]')
     if (hoveredElement) {
       hoveredElement.removeAttribute('hovered')
     }
 
-    const selectedElement = document.querySelector('[selected]')
+    const selectedElement = pagebuilder.querySelector('[selected]')
+
     if (selectedElement) {
       selectedElement.removeAttribute('selected')
     }
   }
 
-  currentClasses() {
+  async currentClasses() {
     if (this.showRunningMethodLogs) {
       console.log('handleAddClasses')
     }
 
+    await new Promise((resolve) => requestAnimationFrame(resolve))
+
     // convert classList to array
     const classListArray = Array.from(this.getElement.value?.classList || [])
 
@@ -497,13 +523,13 @@ class PageBuilderClass {
     // Store the parent of the deleted element
     // if parent element tag is section remove the hole component
     if (element.parentElement?.tagName !== 'SECTION') {
-      this.pageBuilderStateStore.setParentElement(element.parentNode)
+      this.pageBuilderStateStore.setParentElement(element.parentNode as HTMLElement)
 
       // Store the outerHTML of the deleted element
       this.pageBuilderStateStore.setRestoredElement(element.outerHTML)
 
       // Store the next sibling of the deleted element
-      this.pageBuilderStateStore.setNextSibling(element.nextSibling)
+      this.pageBuilderStateStore.setNextSibling(element.nextSibling as HTMLElement | null)
     }
 
     // if parent element tag is section remove the hole component
@@ -551,7 +577,6 @@ class PageBuilderClass {
     if (this.showRunningMethodLogs) {
       console.log('handleFontWeight')
     }
-    if (!userSelectedFontWeight) return
 
     this.#applyElementClassChanges(
       userSelectedFontWeight,
@@ -563,7 +588,6 @@ class PageBuilderClass {
     if (this.showRunningMethodLogs) {
       console.log('handleFontFamily')
     }
-    if (!userSelectedFontFamily) return
 
     this.#applyElementClassChanges(
       userSelectedFontFamily,
@@ -575,7 +599,6 @@ class PageBuilderClass {
     if (this.showRunningMethodLogs) {
       console.log('handleFontStyle')
     }
-    if (!userSelectedFontStyle) return
 
     this.#applyElementClassChanges(
       userSelectedFontStyle,
@@ -587,7 +610,6 @@ class PageBuilderClass {
     if (this.showRunningMethodLogs) {
       console.log('handleVerticalPadding')
     }
-    if (!userSelectedVerticalPadding) return
 
     this.#applyElementClassChanges(
       userSelectedVerticalPadding,
@@ -599,7 +621,6 @@ class PageBuilderClass {
     if (this.showRunningMethodLogs) {
       console.log('handleHorizontalPadding')
     }
-    if (!userSelectedHorizontalPadding) return
 
     this.#applyElementClassChanges(
       userSelectedHorizontalPadding,
@@ -612,7 +633,6 @@ class PageBuilderClass {
     if (this.showRunningMethodLogs) {
       console.log('handleVerticalMargin')
     }
-    if (!userSelectedVerticalMargin) return
 
     this.#applyElementClassChanges(
       userSelectedVerticalMargin,
@@ -624,7 +644,6 @@ class PageBuilderClass {
     if (this.showRunningMethodLogs) {
       console.log('handleHorizontalMargin')
     }
-    if (!userSelectedHorizontalMargin) return
 
     this.#applyElementClassChanges(
       userSelectedHorizontalMargin,
@@ -638,7 +657,6 @@ class PageBuilderClass {
     if (this.showRunningMethodLogs) {
       console.log('handleBorderStyle')
     }
-    if (!borderStyle) return
 
     this.#applyElementClassChanges(
       borderStyle,
@@ -650,7 +668,6 @@ class PageBuilderClass {
     if (this.showRunningMethodLogs) {
       console.log('handleBorderWidth')
     }
-    if (!borderWidth) return
 
     this.#applyElementClassChanges(
       borderWidth,
@@ -662,7 +679,6 @@ class PageBuilderClass {
     if (this.showRunningMethodLogs) {
       console.log('handleBorderColor')
     }
-    if (!borderColor) return
 
     this.#applyElementClassChanges(
       borderColor,
@@ -673,7 +689,6 @@ class PageBuilderClass {
   // border color, style & width / end
 
   handleBackgroundColor(color?: string): void {
-    if (!color) return
     this.#applyElementClassChanges(
       color,
       tailwindColors.backgroundColorVariables,
@@ -682,7 +697,6 @@ class PageBuilderClass {
   }
 
   handleTextColor(color?: string): void {
-    if (!color) return
     this.#applyElementClassChanges(color, tailwindColors.textColorVariables, 'setTextColor')
   }
 
@@ -691,7 +705,6 @@ class PageBuilderClass {
     if (this.showRunningMethodLogs) {
       console.log('handleBorderRadiusGlobal')
     }
-    if (!borderRadiusGlobal) return
 
     this.#applyElementClassChanges(
       borderRadiusGlobal,
@@ -703,7 +716,6 @@ class PageBuilderClass {
     if (this.showRunningMethodLogs) {
       console.log('handleBorderRadiusTopLeft')
     }
-    if (!borderRadiusTopLeft) return
 
     this.#applyElementClassChanges(
       borderRadiusTopLeft,
@@ -715,7 +727,6 @@ class PageBuilderClass {
     if (this.showRunningMethodLogs) {
       console.log('handleBorderRadiusTopRight')
     }
-    if (!borderRadiusTopRight) return
 
     this.#applyElementClassChanges(
       borderRadiusTopRight,
@@ -727,7 +738,6 @@ class PageBuilderClass {
     if (this.showRunningMethodLogs) {
       console.log('handleBorderRadiusBottomleft')
     }
-    if (!borderRadiusBottomleft) return
 
     this.#applyElementClassChanges(
       borderRadiusBottomleft,
@@ -739,7 +749,6 @@ class PageBuilderClass {
     if (this.showRunningMethodLogs) {
       console.log('handleBorderRadiusBottomRight')
     }
-    if (!borderRadiusBottomRight) return
 
     this.#applyElementClassChanges(
       borderRadiusBottomRight,
@@ -857,7 +866,6 @@ class PageBuilderClass {
     if (this.showRunningMethodLogs) {
       console.log('handleBackgroundOpacity')
     }
-    if (!opacity) return
 
     this.#applyElementClassChanges(
       opacity,
@@ -869,7 +877,6 @@ class PageBuilderClass {
     if (this.showRunningMethodLogs) {
       console.log('handleOpacity')
     }
-    if (!opacity) return
 
     this.#applyElementClassChanges(opacity, tailwindOpacities.opacities, 'setOpacity')
   }
@@ -1454,7 +1461,9 @@ class PageBuilderClass {
     this.#addHyperlinkToElement(hyperlinkEnable, urlInput || null, openHyperlinkInNewTab || false)
   }
 
-  handlePageBuilderMethods(): void {
+  async handlePageBuilderMethods(): Promise<void> {
+    await new Promise((resolve) => requestAnimationFrame(resolve))
+
     this.pageBuilderStateStore.setParentElement(null)
     this.pageBuilderStateStore.setRestoredElement(null)
 
@@ -1503,7 +1512,7 @@ class PageBuilderClass {
     // handle text color
     this.handleTextColor(undefined)
     // handle classes
-    this.currentClasses()
+    await this.currentClasses()
   }
 
   // Helper method for custom components to easily add components

package/src/Components/Homepage/Navbar.vue

@@ -1,30 +0,0 @@
-<script setup>
-const emit = defineEmits(['handleButton']);
-
-// first button function
-const handleButton = function () {
-  emit('handleButton');
-};
-</script>
-
-<template>
-  <nav
-    class="px-6 py-6 mx-auto flex items-center justify-between bg-gray-50 px-4 lg:h-[10vh] h-[16vh]"
-    aria-label="Global"
-  >
-    <img
-      class="h-6"
-      src="/logo/logo.svg"
-      alt="Logo"
-    />
-
-    <div class="flex lg:gap-x-12 myPrimaryGap">
-      <p
-        @click="handleButton"
-        class="text-lg font-medium text-myPrimaryDarkGrayColor flex gap-2 items-center cursor-pointer"
-      >
-        Start Builder
-      </p>
-    </div>
-  </nav>
-</template>

package/src/Components/MediaLibrary/SidebarUnsplash.vue

@@ -1,33 +0,0 @@
-<script setup>
-import { computed } from 'vue'
-import { usePageBuilderStateStore } from '@/stores/page-builder-state'
-
-const pageBuilderStateStore = usePageBuilderStateStore(internalPinia)
-
-const getCurrentImage = computed(() => {
-  return pageBuilderStateStore.getCurrentImage
-})
-</script>
-
-<template>
-  <!-- Loading # end -->
-  <div v-if="getCurrentImage && getCurrentImage.src" class="pb-6 space-y-6">
-    <img
-      class="mx-auto block w-full object-cover object-center cursor-pointer"
-      :src="`${getCurrentImage.src}`"
-      alt="file"
-    />
-
-    <div class="md:px-3 px-2">
-      <div>
-        <h3 class="font-normal text-gray-900">Information</h3>
-        <dl class="mt-2 border-t border-b border-gray-200 divide-y divide-gray-200">
-          <div class="py-3 flex justify-between text-sm font-normal items-center">
-            <dt class="text-gray-500">From</dt>
-            <dd class="text-gray-900">Unsplash</dd>
-          </div>
-        </dl>
-      </div>
-    </div>
-  </div>
-</template>