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

package/package.json

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

@@ -1,8 +1,8 @@
 <script setup>
-import { ref, computed, onMounted, inject } from 'vue'
+import { computed } from 'vue'
+import { usePageBuilderStateStore } from '@/stores/page-builder-state'
 
-// Get consolidated store from parent PageBuilder component
-const pageBuilderStateStore = inject('pageBuilderStateStore')
+const pageBuilderStateStore = usePageBuilderStateStore(internalPinia)
 
 const getCurrentImage = computed(() => {
   return pageBuilderStateStore.getCurrentImage

package/src/Components/Modals/PageBuilderPreviewModal.vue

@@ -23,6 +23,7 @@ defineProps({
   },
 })
 
+const pageBuilderStateStore = usePageBuilderStateStore(internalPinia)
 const emit = defineEmits(['firstPageBuilderPreviewModalButton'])
 
 // first button function
@@ -38,8 +39,6 @@ const handleEscapeKey = function () {
   firstButton()
 }
 
-const pageBuilderStateStore = usePageBuilderStateStore(internalPinia)
-
 const getPageBuilderLogo = computed(() => {
   return pageBuilderStateStore.getPageBuilderLogo
 })

package/src/Components/PageBuilder/NoneCustomSearchComponent.vue

@@ -4,20 +4,21 @@ 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, PageBuilderStateStore } from '../../types'
+import type { ComponentObject } from '../../types'
+import { usePageBuilderStateStore } from '../../stores/page-builder-state'
+import type { Pinia } from 'pinia'
 
-import { inject, ref } from 'vue'
+import { inject } from 'vue'
 
-// Get stores from parent PageBuilder component
-const pageBuilderStateStore = inject<PageBuilderStateStore>('pageBuilderStateStore')
+// Get store from parent PageBuilder component
+const internalPinia = inject('internalPinia') as Pinia
 
 // Get modal close function
 const { closeAddComponentModal } = usePageBuilderModal()
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore!)
+const pageBuilderStateStore = usePageBuilderStateStore(internalPinia)
 
-// Track image loading states
-const imageLoadingStates = ref<Record<string, boolean>>({})
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
 // Super simple component addition with professional modal closing!
 const handleDropComponent = function (componentObject: ComponentObject) {

package/src/PageBuilder/PageBuilder.vue

@@ -400,7 +400,7 @@ onMounted(async () => {
                 >
                   <div class="flex items-center justify-center gap-2">
                     <span class="lg:block hidden">
-                      <div>Add new Elements</div>
+                      <div>Add new Components</div>
                     </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"
@@ -482,7 +482,7 @@ onMounted(async () => {
               >
                 <div class="flex items-center justify-center gap-2 font-medium cursor-pointer">
                   <span class="lg:block hidden">
-                    <div>Add new Elements</div>
+                    <div>Add new Components</div>
                   </span>
                 </div>
 
@@ -492,7 +492,7 @@ onMounted(async () => {
                     class="myPrimaryButton flex items-center gap-2 justify-center"
                   >
                     <span class="myMediumIcon material-symbols-outlined"> interests </span>
-                    Add new Elements
+                    Add new Components
                   </button>
                 </div>
               </div>

package/src/utils/html-elements/componentHelpers.ts

@@ -92,7 +92,7 @@ const componentHelpers: ComponentHelper[] = [
     title: 'Link',
     icon: `
         <span class="material-symbols-outlined">
-        horizontal_rule
+        link
         </span>
         `,
   },