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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "v3.1.0",
+  "version": "v3.1.1",
   "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/PageBuilder/EditorMenu/Editables/EditGetElement.vue

@@ -16,6 +16,7 @@ const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 const getElement = computed(() => {
   return pageBuilderStateStore.getElement
 })
+
 const getShowModalTipTap = computed(() => {
   const result = pageBuilderStateStore.getShowModalTipTap
 
@@ -330,7 +331,7 @@ const handleModalIframeSrc = function () {
         <template
           v-if="
             getElement &&
-            Object.keys(getElement).length !== 0 &&
+            getElement.nodeType === 1 &&
             !getBasePrimaryImage &&
             !pageBuilderClass.ElOrFirstChildIsIframe()
           "

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

@@ -99,7 +99,6 @@ 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 }}
@@ -107,7 +106,7 @@ const updateCurrentTab = function (tab) {
               </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>
+                  <p>Selected HTML:</p>
                   <p class="whitespace-pre-line leading-5">
                     {{ getElement?.outerHTML }}
                   </p>
@@ -132,16 +131,6 @@ const updateCurrentTab = function (tab) {
                     }}
                   </p>
                 </div>
-                <div class="flex flex-col gap-2 mt-4">
-                  <p>Selected element style:</p>
-                  <p class="whitespace-pre-line leading-5">
-                    {{
-                      getElement?.style
-                        ? JSON.stringify(getElement?.style)
-                        : typeof getElement?.style
-                    }}
-                  </p>
-                </div>
               </div>
             </div>
             <div v-if="current === 'component'">

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

@@ -486,26 +486,28 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
       this.textColor = payload
     },
     setElement(payload: HTMLElement | null): void {
-      this.element = {} as HTMLElement
+      // Force reactivity by setting to null first, then the actual value
+      this.element = null
       nextTick(() => {
         this.element = payload
       })
     },
     setComponent(payload: ComponentObject | null): void {
-      console.log('setComponent called:', payload)
       if (!payload) {
         this.element = null
         this.component = null
         return
       }
-      this.component = {} as ComponentObject
+      // Force reactivity by setting to null first, then the actual value
+      this.component = null
       nextTick(() => {
         this.component = payload
       })
     },
 
     setComponents(payload: ComponentObject[] | null): void {
-      this.components = {} as ComponentObject[]
+      // Force reactivity by setting to empty array first, then the actual value
+      this.components = []
       nextTick(() => {
         this.components = payload || []
       })