@myissue/vue-website-page-builder 3.0.17 → 3.0.19

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

@@ -1,18 +1,27 @@
 <script setup>
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
-import PageBuilder from '@/composables/PageBuilder.ts'
-import { ref, computed } from 'vue'
+import PageBuilderClass from '@/composables/PageBuilderClass.ts'
+import { ref, computed, inject } from 'vue'
 import PageBuilderPreviewModal from '@/Components/Modals/PageBuilderPreviewModal.vue'
 import Preview from '@/PageBuilder/Preview.vue'
 import SlideOverRight from '@/Components/PageBuilder/Slidebars/SlideOverRight.vue'
 import PageBuilderSettings from '@/Components/PageBuilder/Settings/PageBuilderSettings.vue'
 import DynamicModal from '@/Components/Modals/DynamicModal.vue'
-import { usePageBuilderStateStore } from '@/stores/page-builder-state'
-import { useMediaLibraryStore } from '@/stores/media-library'
 
-const mediaLibraryStore = useMediaLibraryStore()
-const pageBuilderStateStore = usePageBuilderStateStore()
-const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
+// Get stores from parent PageBuilder component
+const pageBuilderStateStore = inject('pageBuilderStateStore')
+const mediaLibraryStore = inject('mediaLibraryStore')
+const userStore = inject('userStore')
+
+const getCurrentUser = computed(() => {
+  return userStore.getCurrentUser
+})
+
+const getCurrentResourceData = computed(() => {
+  return pageBuilderStateStore.getCurrentResourceData
+})
+
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
 const emit = defineEmits(['previewCurrentDesign'])
 
 const showModalDeleteAllComponents = ref(false)
@@ -63,7 +72,7 @@ const deleteAllComponents = function () {
   //
   // handle click
   thirdModalButtonFunction.value = function () {
-    pageBuilder.deleteAllComponents()
+    pageBuilderClass.deleteAllComponents()
     pageBuilderStateStore.setComponents(null)
     showModalDeleteAllComponents.value = false
   }
@@ -86,117 +95,163 @@ const settingsSlideOverButton = function () {
 </script>
 
 <template>
-  <SlideOverRight
-    :open="showSettingsSlideOverRight"
-    :title="titleSettingsSlideOverRight"
-    @slideOverButton="settingsSlideOverButton"
-  >
-    <PageBuilderSettings> </PageBuilderSettings>
-  </SlideOverRight>
-  <DynamicModal
-    :show="showModalDeleteAllComponents"
-    :type="typeModal"
-    :gridColumnAmount="gridColumnModal"
-    :title="titleModal"
-    :description="descriptionModal"
-    :firstButtonText="firstButtonModal"
-    :secondButtonText="secondButtonModal"
-    :thirdButtonText="thirdButtonModal"
-    @firstModalButtonFunction="firstModalButtonFunction"
-    @secondModalButtonFunction="secondModalButtonFunction"
-    @thirdModalButtonFunction="thirdModalButtonFunction"
-  >
-    <header></header>
-    <main></main>
-  </DynamicModal>
-  <Menu as="div" class="myPrimaryParagraph relative lg:inline-block hidden text-left">
-    <div>
-      <MenuButton
-        class="inline-flex items-center gap-2 justify-center w-full rounded-md border border-gray-300 shadow-sm pl-4 pr-6 py-2 bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-emerald-600"
-      >
-        <span class="material-symbols-outlined text-[16px]"> keyboard_command_key </span>
-        <span class="text-sm"> Options </span>
-      </MenuButton>
-    </div>
-
-    <transition
-      enter-active-class="transition ease-out duration-100"
-      enter-from-class="transform opacity-0 scale-95"
-      enter-to-class="transform opacity-100 scale-100"
-      leave-active-class="transition ease-in duration-75"
-      leave-from-class="transform opacity-100 scale-100"
-      leave-to-class="transform opacity-0 scale-95"
+  <div>
+    <SlideOverRight
+      :open="showSettingsSlideOverRight"
+      :title="titleSettingsSlideOverRight"
+      @slideOverButton="settingsSlideOverButton"
     >
-      <MenuItems
-        class="z-50 origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none"
+      <PageBuilderSettings> </PageBuilderSettings>
+    </SlideOverRight>
+    <DynamicModal
+      :show="showModalDeleteAllComponents"
+      :type="typeModal"
+      :gridColumnAmount="gridColumnModal"
+      :title="titleModal"
+      :description="descriptionModal"
+      :firstButtonText="firstButtonModal"
+      :secondButtonText="secondButtonModal"
+      :thirdButtonText="thirdButtonModal"
+      @firstModalButtonFunction="firstModalButtonFunction"
+      @secondModalButtonFunction="secondModalButtonFunction"
+      @thirdModalButtonFunction="thirdModalButtonFunction"
+    >
+      <header></header>
+      <main></main>
+    </DynamicModal>
+    <Menu as="div" class="myPrimaryParagraph relative lg:inline-block hidden text-left">
+      <div>
+        <MenuButton
+          class="inline-flex items-center gap-2 justify-center w-full rounded-md border border-gray-300 shadow-sm pl-4 pr-6 py-2 bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-emerald-600"
+        >
+          <span class="material-symbols-outlined text-[16px]"> keyboard_command_key </span>
+          <span class="text-sm"> Options </span>
+        </MenuButton>
+      </div>
+
+      <transition
+        enter-active-class="transition ease-out duration-100"
+        enter-from-class="transform opacity-0 scale-95"
+        enter-to-class="transform opacity-100 scale-100"
+        leave-active-class="transition ease-in duration-75"
+        leave-from-class="transform opacity-100 scale-100"
+        leave-to-class="transform opacity-0 scale-95"
       >
-        <div class="py-1">
-          <MenuItem v-slot="{ active }">
-            <div
-              @click="handlePageBuilderPreview"
-              class="cursor-pointer"
-              :class="[
-                active ? 'bg-myPrimaryLightGrayColor text-gray-900' : 'text-gray-700',
-                'block px-4 py-2',
-              ]"
-            >
-              <div class="flex items-center justify-left gap-2 text-sm">
+        <MenuItems
+          class="z-50 origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none"
+        >
+          <div class="py-1">
+            <template v-if="getCurrentUser && getCurrentUser.name">
+              <MenuItem v-slot="{ active }">
                 <div
-                  class="h-8 w-8 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"
+                  class="cursor-defualt"
+                  :class="[
+                    active ? 'bg-myPrimaryLightGrayColor text-gray-900' : 'text-gray-700',
+                    'block px-4 py-2',
+                  ]"
                 >
-                  <span class="material-symbols-outlined text-[16px]"> visibility </span>
+                  <div class="flex items-center justify-left gap-2 text-sm">
+                    <div
+                      class="h-8 w-8 cursor-defualt 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 text-[16px]"> person </span>
+                    </div>
+                    <div>
+                      {{ getCurrentUser.name }}
+                    </div>
+                  </div>
                 </div>
-                Preview
-              </div>
-            </div>
-          </MenuItem>
-
-          <MenuItem v-slot="{ active }">
-            <div
-              @click="handleSettingsSlideOver"
-              class="cursor-pointer"
-              :class="[
-                active ? 'bg-myPrimaryLightGrayColor text-gray-900' : 'text-gray-700',
-                'block px-4 py-2',
-              ]"
-            >
-              <div class="flex items-center justify-left gap-2 text-sm">
+              </MenuItem>
+            </template>
+            <template v-if="getCurrentResourceData && getCurrentResourceData.title">
+              <MenuItem v-slot="{ active }">
                 <div
-                  class="h-8 w-8 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"
+                  class="cursor-default"
+                  :class="[
+                    active ? 'bg-myPrimaryLightGrayColor text-gray-900' : 'text-gray-700',
+                    'block px-4 py-2',
+                  ]"
                 >
-                  <span class="material-symbols-outlined text-[16px]"> settings </span>
+                  <div class="flex items-center justify-left gap-2 text-sm">
+                    <div
+                      class="h-8 w-8 cursor-default 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 text-[16px]"> post </span>
+                    </div>
+                    <div>
+                      {{ getCurrentResourceData.title }}
+                    </div>
+                  </div>
+                </div>
+              </MenuItem>
+            </template>
+            <MenuItem v-slot="{ active }">
+              <div
+                @click="handlePageBuilderPreview"
+                class="cursor-pointer"
+                :class="[
+                  active ? 'bg-myPrimaryLightGrayColor text-gray-900' : 'text-gray-700',
+                  'block px-4 py-2',
+                ]"
+              >
+                <div class="flex items-center justify-left gap-2 text-sm">
+                  <div
+                    class="h-8 w-8 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 text-[16px]"> visibility </span>
+                  </div>
+                  Preview
                 </div>
-                Settings
               </div>
-            </div>
-          </MenuItem>
-          <MenuItem v-slot="{ active }">
-            <div
-              @click="deleteAllComponents"
-              class="cursor-pointer"
-              :class="[
-                active ? 'bg-myPrimaryLightGrayColor text-gray-900' : 'text-gray-700',
-                'block px-4 py-2',
-              ]"
-            >
-              <div class="flex items-center justify-left gap-2 text-sm">
-                <div
-                  class="h-8 w-8 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="myMediumIcon material-symbols-outlined text-[16px]"> delete </span>
+            </MenuItem>
+
+            <MenuItem v-slot="{ active }">
+              <div
+                @click="handleSettingsSlideOver"
+                class="cursor-pointer"
+                :class="[
+                  active ? 'bg-myPrimaryLightGrayColor text-gray-900' : 'text-gray-700',
+                  'block px-4 py-2',
+                ]"
+              >
+                <div class="flex items-center justify-left gap-2 text-sm">
+                  <div
+                    class="h-8 w-8 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 text-[16px]"> settings </span>
+                  </div>
+                  Settings
                 </div>
-                <span class="group-hover:text-white"> Clear page </span>
               </div>
-            </div>
-          </MenuItem>
-        </div>
-      </MenuItems>
-    </transition>
-  </Menu>
-  <PageBuilderPreviewModal
-    :show="openPageBuilderPreviewModal"
-    @firstPageBuilderPreviewModalButton="firstPageBuilderPreviewModalButton"
-  >
-    <Preview></Preview>
-  </PageBuilderPreviewModal>
+            </MenuItem>
+            <MenuItem v-slot="{ active }">
+              <div
+                @click="deleteAllComponents"
+                class="cursor-pointer"
+                :class="[
+                  active ? 'bg-myPrimaryLightGrayColor text-gray-900' : 'text-gray-700',
+                  'block px-4 py-2',
+                ]"
+              >
+                <div class="flex items-center justify-left gap-2 text-sm">
+                  <div
+                    class="h-8 w-8 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="myMediumIcon material-symbols-outlined text-[16px]"> delete </span>
+                  </div>
+                  <span class="group-hover:text-white"> Clear page </span>
+                </div>
+              </div>
+            </MenuItem>
+          </div>
+        </MenuItems>
+      </transition>
+    </Menu>
+    <PageBuilderPreviewModal
+      :show="openPageBuilderPreviewModal"
+      @firstPageBuilderPreviewModalButton="firstPageBuilderPreviewModalButton"
+    >
+      <Preview></Preview>
+    </PageBuilderPreviewModal>
+  </div>
 </template>

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

@@ -1,20 +1,13 @@
 <script setup>
+import { ref, computed, inject, watch } from 'vue'
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
+import PageBuilderClass from '@/composables/PageBuilderClass.ts'
 import tailwindColors from '@/utils/builder/tailwaind-colors'
-import PageBuilder from '@/composables/PageBuilder.ts'
-import { computed, ref, watch } from 'vue'
-import {
-  Listbox,
-  ListboxButton,
-  ListboxLabel,
-  ListboxOption,
-  ListboxOptions,
-} from '@headlessui/vue'
-import { usePageBuilderStateStore } from '@/stores/page-builder-state'
-import { useMediaLibraryStore } from '@/stores/media-library'
 
-const mediaLibraryStore = useMediaLibraryStore()
-const pageBuilderStateStore = usePageBuilderStateStore()
-const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
+// Get stores from parent PageBuilder component
+const pageBuilderStateStore = inject('pageBuilderStateStore')
+const mediaLibraryStore = inject('mediaLibraryStore')
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
 const backgroundColor = ref(null)
 const getBackgroundColor = computed(() => {
   return pageBuilderStateStore.getBackgroundColor
@@ -24,7 +17,7 @@ watch(
   getBackgroundColor,
   (newValue) => {
     backgroundColor.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -60,7 +53,7 @@ watch(
           <ListboxOption
             as="template"
             v-for="color in tailwindColors.backgroundColorVariables"
-            @click="pageBuilder.handleBackgroundColor(backgroundColor)"
+            @click="pageBuilderClass.handleBackgroundColor(backgroundColor)"
             :key="color"
             :value="color"
             v-slot="{ active, backgroundColor }"

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

@@ -1,14 +1,14 @@
 <script setup>
+import { ref, computed, inject, watch } from 'vue'
+import EditorAccordion from '../EditorAccordion.vue'
+import PageBuilderClass from '@/composables/PageBuilderClass.ts'
 import tailwindBorderRadius from '@/utils/builder/tailwind-border-radius'
-import PageBuilder from '@/composables/PageBuilder.ts'
-import EditorAccordion from '@/Components/PageBuilder/EditorMenu/EditorAccordion.vue'
-import { computed, ref, watch } from 'vue'
-import { usePageBuilderStateStore } from '@/stores/page-builder-state'
-import { useMediaLibraryStore } from '@/stores/media-library'
 
-const mediaLibraryStore = useMediaLibraryStore()
-const pageBuilderStateStore = usePageBuilderStateStore()
-const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
+// Get stores from parent PageBuilder component
+const pageBuilderStateStore = inject('pageBuilderStateStore')
+const mediaLibraryStore = inject('mediaLibraryStore')
+
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
 const borderRadiusGlobal = ref(null)
 const borderRadiusTopLeft = ref(null)
 const borderRadiusTopRight = ref(null)
@@ -34,7 +34,7 @@ watch(
   getBorderRadiusGlobal,
   (newValue) => {
     borderRadiusGlobal.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -42,7 +42,7 @@ watch(
   getBorderRadiusTopLeft,
   (newValue) => {
     borderRadiusTopLeft.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -50,7 +50,7 @@ watch(
   getBorderRadiusTopRight,
   (newValue) => {
     borderRadiusTopRight.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -58,7 +58,7 @@ watch(
   getBorderRadiusBottomleft,
   (newValue) => {
     borderRadiusBottomleft.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -66,7 +66,7 @@ watch(
   getBorderRadiusBottomRight,
   (newValue) => {
     borderRadiusBottomRight.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -82,7 +82,7 @@ watch(
         <select
           v-model="borderRadiusGlobal"
           class="myPrimarySelect"
-          @change="pageBuilder.handleBorderRadiusGlobal(borderRadiusGlobal)"
+          @change="pageBuilderClass.handleBorderRadiusGlobal(borderRadiusGlobal)"
         >
           <option disabled value="">Select</option>
           <option
@@ -99,7 +99,7 @@ watch(
         <select
           v-model="borderRadiusTopLeft"
           class="myPrimarySelect"
-          @change="pageBuilder.handleBorderRadiusTopLeft(borderRadiusTopLeft)"
+          @change="pageBuilderClass.handleBorderRadiusTopLeft(borderRadiusTopLeft)"
         >
           <option disabled value="">Select</option>
           <option
@@ -115,7 +115,7 @@ watch(
         <select
           v-model="borderRadiusTopRight"
           class="myPrimarySelect"
-          @change="pageBuilder.handleBorderRadiusTopRight(borderRadiusTopRight)"
+          @change="pageBuilderClass.handleBorderRadiusTopRight(borderRadiusTopRight)"
         >
           <option disabled value="">Select</option>
           <option
@@ -131,7 +131,7 @@ watch(
         <select
           v-model="borderRadiusBottomleft"
           class="myPrimarySelect"
-          @change="pageBuilder.handleBorderRadiusBottomleft(borderRadiusBottomleft)"
+          @change="pageBuilderClass.handleBorderRadiusBottomleft(borderRadiusBottomleft)"
         >
           <option disabled value="">Select</option>
           <option
@@ -147,7 +147,7 @@ watch(
         <select
           v-model="borderRadiusBottomRight"
           class="myPrimarySelect"
-          @change="pageBuilder.handleBorderRadiusBottomRight(borderRadiusBottomRight)"
+          @change="pageBuilderClass.handleBorderRadiusBottomRight(borderRadiusBottomRight)"
         >
           <option disabled value="">Select</option>
           <option

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

@@ -1,21 +1,16 @@
 <script setup>
+import { ref, computed, inject, watch } from 'vue'
+import EditorAccordion from '../EditorAccordion.vue'
+import PageBuilderClass from '@/composables/PageBuilderClass.ts'
 import tailwindBorderStyleWidthPlusColor from '@/utils/builder/tailwind-border-style-width-color'
-import PageBuilder from '@/composables/PageBuilder.ts'
-import EditorAccordion from '@/Components/PageBuilder/EditorMenu/EditorAccordion.vue'
-import { computed, ref, watch } from 'vue'
-import {
-  Listbox,
-  ListboxButton,
-  ListboxLabel,
-  ListboxOption,
-  ListboxOptions,
-} from '@headlessui/vue'
-import { usePageBuilderStateStore } from '@/stores/page-builder-state'
-import { useMediaLibraryStore } from '@/stores/media-library'
+import tailwindColors from '@/utils/builder/tailwaind-colors'
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
 
-const mediaLibraryStore = useMediaLibraryStore()
-const pageBuilderStateStore = usePageBuilderStateStore()
-const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
+// Get stores from parent PageBuilder component
+const pageBuilderStateStore = inject('pageBuilderStateStore')
+const mediaLibraryStore = inject('mediaLibraryStore')
+
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
 const borderStyle = ref(null)
 const borderWidth = ref(null)
 const borderColor = ref(null)
@@ -33,7 +28,7 @@ watch(
   getBorderStyle,
   (newValue) => {
     borderStyle.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -41,7 +36,7 @@ watch(
   getBorderWidth,
   (newValue) => {
     borderWidth.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -49,7 +44,7 @@ watch(
   getBorderColor,
   (newValue) => {
     borderColor.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -64,7 +59,7 @@ watch(
         <select
           v-model="borderStyle"
           class="myPrimarySelect"
-          @change="pageBuilder.handleBorderStyle(borderStyle)"
+          @change="pageBuilderClass.handleBorderStyle(borderStyle)"
         >
           <option disabled value="">Select</option>
           <option
@@ -80,7 +75,7 @@ watch(
         <select
           v-model="borderWidth"
           class="myPrimarySelect"
-          @change="pageBuilder.handleBorderWidth(borderWidth)"
+          @change="pageBuilderClass.handleBorderWidth(borderWidth)"
         >
           <option disabled value="">Select</option>
           <option
@@ -127,7 +122,7 @@ watch(
               <ListboxOption
                 as="template"
                 v-for="color in tailwindBorderStyleWidthPlusColor.borderColor"
-                @click="pageBuilder.handleBorderColor(borderColor)"
+                @click="pageBuilderClass.handleBorderColor(borderColor)"
                 :key="color"
                 :value="color"
                 v-slot="{ active, borderColor }"

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

@@ -1,13 +1,13 @@
 <script setup>
-import { computed, ref, watch } from 'vue'
-import EditorAccordion from '@/Components/PageBuilder/EditorMenu/EditorAccordion.vue'
-import PageBuilder from '@/composables/PageBuilder.ts'
-import { usePageBuilderStateStore } from '@/stores/page-builder-state'
-import { useMediaLibraryStore } from '@/stores/media-library'
+import { ref, computed, inject, watch } from 'vue'
+import EditorAccordion from '../EditorAccordion.vue'
+import PageBuilderClass from '@/composables/PageBuilderClass.ts'
 
-const mediaLibraryStore = useMediaLibraryStore()
-const pageBuilderStateStore = usePageBuilderStateStore()
-const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
+// Get stores from parent PageBuilder component
+const pageBuilderStateStore = inject('pageBuilderStateStore')
+const mediaLibraryStore = inject('mediaLibraryStore')
+
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
 const currentClasses = ref(null)
 const getCurrentClasses = computed(() => {
   return pageBuilderStateStore.getCurrentClasses
@@ -24,8 +24,8 @@ watch(
 const inputClass = ref('')
 
 const handleAddClasses = function () {
-  pageBuilder.handleAddClasses(inputClass.value)
-  pageBuilder.handlePageBuilderMethods()
+  pageBuilderClass.handleAddClasses(inputClass.value)
+  pageBuilderClass.handlePageBuilderMethods()
 
   inputClass.value = ''
 }
@@ -42,8 +42,8 @@ const handleAddClasses = function () {
           class="myPrimaryTag cursor-pointer hover:bg-myPrimaryErrorColor hover:text-white text-xs py-2 font-medium"
           @click="
             () => {
-              pageBuilder.handleRemoveClasses(className)
-              pageBuilder.handlePageBuilderMethods()
+              pageBuilderClass.handleRemoveClasses(className)
+              pageBuilderClass.handlePageBuilderMethods()
             }
           "
         >

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

@@ -1,12 +1,13 @@
 <script setup>
 import DynamicModal from '@/Components/Modals/DynamicModal.vue'
-import PageBuilder from '@/composables/PageBuilder.ts'
+import { computed, inject } from 'vue'
+import PageBuilderClass from '@/composables/PageBuilderClass.ts'
 import { ref } from 'vue'
-import { usePageBuilderStateStore } from '@/stores/page-builder-state'
-import { useMediaLibraryStore } from '@/stores/media-library'
 
-const mediaLibraryStore = useMediaLibraryStore()
-const pageBuilderStateStore = usePageBuilderStateStore()
+// Get stores from parent PageBuilder component
+const pageBuilderStateStore = inject('pageBuilderStateStore')
+const mediaLibraryStore = inject('mediaLibraryStore')
+
 const showModalDeleteComponent = ref(false)
 // use dynamic model
 const typeModal = ref('')
@@ -20,7 +21,7 @@ const thirdButtonModal = ref(null)
 const firstModalButtonFunction = ref(null)
 const secondModalButtonFunction = ref(null)
 const thirdModalButtonFunction = ref(null)
-const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
 
 // remove component
 const deleteComponent = function (e) {
@@ -40,7 +41,7 @@ const deleteComponent = function (e) {
   //
   // handle click
   thirdModalButtonFunction.value = function () {
-    pageBuilder.deleteComponent()
+    pageBuilderClass.deleteComponent()
 
     showModalDeleteComponent.value = false
   }
@@ -77,14 +78,14 @@ const deleteComponent = function (e) {
 
     <button
       type="button"
-      @click="pageBuilder.moveComponent(-1)"
+      @click="pageBuilderClass.moveComponent(-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="pageBuilder.moveComponent(1)"
+      @click="pageBuilderClass.moveComponent(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>