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

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

@@ -1,13 +1,13 @@
 <script setup>
 import EditorAccordion from '../EditorAccordion.vue'
-import { computed, ref } from 'vue'
-import PageBuilder from '@/composables/PageBuilder.ts'
-import { usePageBuilderStateStore } from '@/stores/page-builder-state'
-import { useMediaLibraryStore } from '@/stores/media-library'
+import { computed, inject } from '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 getRestoredElement = computed(() => {
   return pageBuilderStateStore.getRestoredElement
 })
@@ -20,7 +20,7 @@ const getRestoredElement = computed(() => {
       <div class="my-2">
         <button
           v-if="getRestoredElement !== null"
-          @click="pageBuilder.handleRestoreElement"
+          @click="pageBuilderClass.handleRestoreElement"
           type="button"
           class="myPrimaryButton gap-2 items-center w-full"
         >
@@ -29,7 +29,7 @@ const getRestoredElement = computed(() => {
         </button>
         <button
           v-if="getRestoredElement === null"
-          @click="pageBuilder.handleDeleteElement"
+          @click="pageBuilderClass.handleDeleteElement"
           type="button"
           class="myPrimaryDeleteButton gap-2 items-center w-full"
         >

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

@@ -1,17 +1,19 @@
 <script setup>
-import { computed, ref } from 'vue'
+import { ref, computed, inject } from 'vue'
 import DynamicModal from '@/Components/Modals/DynamicModal.vue'
 import TipTapInput from '@/Components/TipTap/TipTapInput.vue'
-import PageBuilder from '@/composables/PageBuilder.ts'
+import PageBuilderClass from '@/composables/PageBuilderClass.ts'
 import MediaLibraryModal from '@/Components/Modals/MediaLibraryModal.vue'
 import TextColorEditor from '@/Components/PageBuilder/EditorMenu/Editables/TextColorEditor.vue'
 import BackgroundColorEditor from '@/Components/PageBuilder/EditorMenu/Editables/BackgroundColorEditor.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 customMediaComponent = inject('CustomMediaComponent')
+
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
+
 const getElement = computed(() => {
   return pageBuilderStateStore.getElement
 })
@@ -107,7 +109,7 @@ const handleAddImage = function () {
   // handle click
   secondMediaButtonFunction.value = function () {
     isLoading.value = true
-    pageBuilder.updateBasePrimaryImage({ type: 'unsplash' })
+    pageBuilderClass.updateBasePrimaryImage({ type: 'unsplash' })
 
     // close media library modal
     showMediaLibraryModal.value = false
@@ -201,138 +203,144 @@ const handleModalIframeSrc = function () {
 }
 </script>
 <template>
-  <DynamicModal
-    :show="showModalIframeSrc"
-    maxWidth="2xl"
-    :type="typeModal"
-    :gridColumnAmount="gridColumnModal"
-    :title="titleModal"
-    :description="descriptionModal"
-    :firstButtonText="firstButtonModal"
-    :secondButtonText="secondButtonModal"
-    :thirdButtonText="thirdButtonModal"
-    @firstModalButtonFunction="firstModalButtonFunction"
-    @secondModalButtonFunction="secondModalButtonFunction"
-    @thirdModalButtonFunction="thirdModalButtonFunction"
-  >
-    <header></header>
-    <main>
-      <div class="myInputGroup">
-        <div class="myPrimaryFormOrganizationHeaderDescriptionSection">
-          <div class="myPrimaryFormOrganizationHeader">
-            <label for="video" class="myPrimaryInputLabel">Video url:</label>
-            <input v-model="iframeSrc" type="text" class="myPrimaryInput" name="video" />
-            <div v-if="urlError" class="min-h-[2.5rem] flex items-center justify-start">
-              <p class="myPrimaryInputError mt-2 mb-0 py-0 self-start">
-                {{ urlError }}
-              </p>
+  <div>
+    <DynamicModal
+      :show="showModalIframeSrc"
+      maxWidth="2xl"
+      :type="typeModal"
+      :gridColumnAmount="gridColumnModal"
+      :title="titleModal"
+      :description="descriptionModal"
+      :firstButtonText="firstButtonModal"
+      :secondButtonText="secondButtonModal"
+      :thirdButtonText="thirdButtonModal"
+      @firstModalButtonFunction="firstModalButtonFunction"
+      @secondModalButtonFunction="secondModalButtonFunction"
+      @thirdModalButtonFunction="thirdModalButtonFunction"
+    >
+      <header></header>
+      <main>
+        <div class="myInputGroup">
+          <div class="myPrimaryFormOrganizationHeaderDescriptionSection">
+            <div class="myPrimaryFormOrganizationHeader">
+              <label for="video" class="myPrimaryInputLabel">Video url:</label>
+              <input v-model="iframeSrc" type="text" class="myPrimaryInput" name="video" />
+              <div v-if="urlError" class="min-h-[2.5rem] flex items-center justify-start">
+                <p class="myPrimaryInputError mt-2 mb-0 py-0 self-start">
+                  {{ urlError }}
+                </p>
+              </div>
             </div>
           </div>
         </div>
+      </main>
+    </DynamicModal>
+    <DynamicModal
+      :simpleModal="true"
+      :show="getShowModalTipTap"
+      maxWidth="5xl"
+      :type="typeModal"
+      :gridColumnAmount="gridColumnModal"
+      :title="titleModal"
+      :description="descriptionModal"
+      :firstButtonText="firstButtonModal"
+      :secondButtonText="secondButtonModal"
+      :thirdButtonText="thirdButtonModal"
+      @firstModalButtonFunction="firstModalButtonFunction"
+      @secondModalButtonFunction="secondModalButtonFunction"
+      @thirdModalButtonFunction="thirdModalButtonFunction"
+    >
+      <header></header>
+      <main class="overflow-y-auto">
+        <TipTapInput></TipTapInput>
+      </main>
+    </DynamicModal>
+
+    <MediaLibraryModal
+      :open="showMediaLibraryModal"
+      :title="titleMedia"
+      :description="descriptionMedia"
+      :firstButtonText="firstButtonMedia"
+      :secondButtonText="secondButtonMedia"
+      :thirdButtonText="thirdButtonMedia"
+      :customMediaComponent="customMediaComponent"
+      @firstMediaButtonFunction="firstMediaButtonFunction"
+      @secondMediaButtonFunction="secondMediaButtonFunction"
+      @thirdMediaButtonFunction="thirdMediaButtonFunction"
+    >
+    </MediaLibraryModal>
+
+    <div
+      class="z-20 py-1 px-2 h-20 flex items-center justify-center mt-2 mx-2 border-b border-myPrimaryLightGrayColor"
+    >
+      <div class="flex items-center justify-center divide-x divide-gray-200 py-1">
+        <template v-if="pageBuilderClass.ElOrFirstChildIsIframe()">
+          <div class="px-2 flex items-center justify-start gap-2">
+            <button
+              @click="handleModalIframeSrc"
+              type="button"
+              class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
+            >
+              <span class="material-symbols-outlined"> play_circle </span>
+              <span>Add YouTube</span>
+            </button>
+          </div>
+        </template>
+
+        <template
+          v-if="
+            pageBuilderClass.selectedElementIsValidText() &&
+            !pageBuilderClass.ElOrFirstChildIsIframe()
+          "
+        >
+          <div class="px-2 flex items-center justify-start gap-2">
+            <button
+              @click="handleModalPreviewTiptap"
+              type="button"
+              class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
+            >
+              <span class="material-symbols-outlined"> edit </span>
+              <span>Edit text</span>
+            </button>
+          </div>
+          <div class="px-2">
+            <TextColorEditor></TextColorEditor>
+          </div>
+        </template>
+
+        <template
+          v-if="
+            getElement &&
+            getComponent &&
+            getBasePrimaryImage !== null &&
+            !pageBuilderClass.ElOrFirstChildIsIframe()
+          "
+        >
+          <div class="px-2 flex items-center justify-start gap-2">
+            <button
+              @click="handleAddImage"
+              type="button"
+              class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
+            >
+              <span class="material-symbols-outlined"> add_photo_alternate </span>
+              <span>Update image</span>
+            </button>
+          </div>
+        </template>
+
+        <template
+          v-if="
+            getElement &&
+            Object.keys(getElement).length !== 0 &&
+            !getBasePrimaryImage &&
+            !pageBuilderClass.ElOrFirstChildIsIframe()
+          "
+        >
+          <div class="px-2">
+            <BackgroundColorEditor></BackgroundColorEditor>
+          </div>
+        </template>
       </div>
-    </main>
-  </DynamicModal>
-  <DynamicModal
-    :simpleModal="true"
-    :show="getShowModalTipTap"
-    maxWidth="5xl"
-    :type="typeModal"
-    :gridColumnAmount="gridColumnModal"
-    :title="titleModal"
-    :description="descriptionModal"
-    :firstButtonText="firstButtonModal"
-    :secondButtonText="secondButtonModal"
-    :thirdButtonText="thirdButtonModal"
-    @firstModalButtonFunction="firstModalButtonFunction"
-    @secondModalButtonFunction="secondModalButtonFunction"
-    @thirdModalButtonFunction="thirdModalButtonFunction"
-  >
-    <header></header>
-    <main class="overflow-y-auto">
-      <TipTapInput></TipTapInput>
-    </main>
-  </DynamicModal>
-
-  <MediaLibraryModal
-    :open="showMediaLibraryModal"
-    :title="titleMedia"
-    :description="descriptionMedia"
-    :firstButtonText="firstButtonMedia"
-    :secondButtonText="secondButtonMedia"
-    :thirdButtonText="thirdButtonMedia"
-    @firstMediaButtonFunction="firstMediaButtonFunction"
-    @secondMediaButtonFunction="secondMediaButtonFunction"
-    @thirdMediaButtonFunction="thirdMediaButtonFunction"
-  >
-  </MediaLibraryModal>
-
-  <div
-    class="z-20 py-1 px-2 h-20 flex items-center justify-center mt-2 mx-2 border-b border-myPrimaryLightGrayColor"
-  >
-    <div class="flex items-center justify-center divide-x divide-gray-200 py-1">
-      <template v-if="pageBuilder.ElOrFirstChildIsIframe()">
-        <div class="px-2 flex items-center justify-start gap-2">
-          <button
-            @click="handleModalIframeSrc"
-            type="button"
-            class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
-          >
-            <span class="material-symbols-outlined"> play_circle </span>
-            <span>Add YouTube</span>
-          </button>
-        </div>
-      </template>
-
-      <template
-        v-if="pageBuilder.selectedElementIsValidText() && !pageBuilder.ElOrFirstChildIsIframe()"
-      >
-        <div class="px-2 flex items-center justify-start gap-2">
-          <button
-            @click="handleModalPreviewTiptap"
-            type="button"
-            class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
-          >
-            <span class="material-symbols-outlined"> edit </span>
-            <span>Edit text</span>
-          </button>
-        </div>
-        <div class="px-2">
-          <TextColorEditor></TextColorEditor>
-        </div>
-      </template>
-
-      <template
-        v-if="
-          getElement &&
-          getComponent &&
-          getBasePrimaryImage !== null &&
-          !pageBuilder.ElOrFirstChildIsIframe()
-        "
-      >
-        <div class="px-2 flex items-center justify-start gap-2">
-          <button
-            @click="handleAddImage"
-            type="button"
-            class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
-          >
-            <span class="material-symbols-outlined"> add_photo_alternate </span>
-            <span>Update image</span>
-          </button>
-        </div>
-      </template>
-
-      <template
-        v-if="
-          getElement &&
-          Object.keys(getElement).length !== 0 &&
-          !getBasePrimaryImage &&
-          !pageBuilder.ElOrFirstChildIsIframe()
-        "
-      >
-        <div class="px-2">
-          <BackgroundColorEditor></BackgroundColorEditor>
-        </div>
-      </template>
     </div>
   </div>
 </template>

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

@@ -1,14 +1,13 @@
 <script setup>
-import { usePageBuilderStateStore } from '@/stores/page-builder-state'
-import PageBuilder from '@/composables/PageBuilder.ts'
-
-const pageBuilderStateStore = usePageBuilderStateStore()
-
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
+import PageBuilderClass from '@/composables/PageBuilderClass.ts'
+import EditorAccordion from '@/Components/PageBuilder/EditorMenu/EditorAccordion.vue'
 
-const pageBuilder = new PageBuilder(pageBuilderStateStore)
+// Get stores from parent PageBuilder component
+const pageBuilderStateStore = inject('pageBuilderStateStore')
+const mediaLibraryStore = inject('mediaLibraryStore')
 
-import EditorAccordion from '@/Components/PageBuilder/EditorMenu/EditorAccordion.vue'
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
 
 const getElement = computed(() => {
   return pageBuilderStateStore.getElement
@@ -29,7 +28,7 @@ const getRestoredElement = computed(() => {
         <template v-if="getRestoredElement">
           <div class="px-2 flex items-center justify-start gap-2">
             <button
-              @click="pageBuilder.handleRestoreElement"
+              @click="pageBuilderClass.handleRestoreElement"
               type="button"
               class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
             >
@@ -42,7 +41,7 @@ const getRestoredElement = computed(() => {
         <template v-if="getElement && !getRestoredElement">
           <div class="px-2 flex items-center justify-start gap-2">
             <button
-              @click="pageBuilder.handleDeleteElement"
+              @click="pageBuilderClass.handleDeleteElement"
               type="button"
               class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:text-white focus-visible:ring-0 hover:bg-myPrimaryErrorColor"
             >

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

@@ -1,14 +1,15 @@
 <script setup>
-import { computed, watch, ref } from 'vue'
+import { computed, watch, ref, inject } from 'vue'
 import EditorAccordion from '@/Components/PageBuilder/EditorMenu/EditorAccordion.vue'
 import MediaLibraryModal from '@/Components/Modals/MediaLibraryModal.vue'
-import PageBuilder from '@/composables/PageBuilder.ts'
-import { usePageBuilderStateStore } from '@/stores/page-builder-state'
-import { useMediaLibraryStore } from '@/stores/media-library'
+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 customMediaComponent = inject('CustomMediaComponent')
+
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
 const isLoading = ref(false)
 
 // use media library
@@ -48,7 +49,7 @@ const handleAddImage = function () {
   // handle click
   secondMediaButtonFunction.value = function () {
     isLoading.value = true
-    pageBuilder.updateBasePrimaryImage({ type: 'unsplash' })
+    pageBuilderClass.updateBasePrimaryImage({ type: 'unsplash' })
 
     // close media library modal
     showMediaLibraryModal.value = false
@@ -59,24 +60,27 @@ const handleAddImage = function () {
 }
 </script>
 <template>
-  <div v-if="getBasePrimaryImage !== null">
-    <img
-      class="object-cover object-center w-full cursor-pointer"
-      :src="getBasePrimaryImage"
-      @click="handleAddImage"
-      alt="image"
-    />
+  <div>
+    <div v-if="getBasePrimaryImage !== null">
+      <img
+        class="object-cover object-center w-full cursor-pointer"
+        :src="getBasePrimaryImage"
+        @click="handleAddImage"
+        alt="image"
+      />
+    </div>
+    <MediaLibraryModal
+      :open="showMediaLibraryModal"
+      :title="titleMedia"
+      :description="descriptionMedia"
+      :firstButtonText="firstButtonMedia"
+      :secondButtonText="secondButtonMedia"
+      :thirdButtonText="thirdButtonMedia"
+      :customMediaComponent="customMediaComponent"
+      @firstMediaButtonFunction="firstMediaButtonFunction"
+      @secondMediaButtonFunction="secondMediaButtonFunction"
+      @thirdMediaButtonFunction="thirdMediaButtonFunction"
+    >
+    </MediaLibraryModal>
   </div>
-  <MediaLibraryModal
-    :open="showMediaLibraryModal"
-    :title="titleMedia"
-    :description="descriptionMedia"
-    :firstButtonText="firstButtonMedia"
-    :secondButtonText="secondButtonMedia"
-    :thirdButtonText="thirdButtonMedia"
-    @firstMediaButtonFunction="firstMediaButtonFunction"
-    @secondMediaButtonFunction="secondMediaButtonFunction"
-    @thirdMediaButtonFunction="thirdMediaButtonFunction"
-  >
-  </MediaLibraryModal>
 </template>

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

@@ -1,14 +1,14 @@
 <script setup>
-import PageBuilder from '@/composables/PageBuilder.ts'
+import { ref, computed, inject, watch, nextTick } from 'vue'
 import EditorAccordion from '../EditorAccordion.vue'
-import { computed, nextTick, ref, watch } from 'vue'
+import PageBuilderClass from '@/composables/PageBuilderClass.ts'
 import { Switch } 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 hyperlinkEnable = ref(false)
 const urlInput = ref(null)
 const openHyperlinkInNewTab = ref(false)
@@ -59,18 +59,26 @@ const handleToggleHyperlinkEnable = async function (data) {
 
   // remove hyperlink
   if (hyperlinkEnable.value === false) {
-    pageBuilder.handleHyperlink(hyperlinkEnable.value, data)
+    pageBuilderClass.handleHyperlink(hyperlinkEnable.value, data)
   }
 }
 // add hyperlink
 const handleHyperlink = function () {
-  pageBuilder.handleHyperlink(hyperlinkEnable.value, urlInput.value, openHyperlinkInNewTab.value)
+  pageBuilderClass.handleHyperlink(
+    hyperlinkEnable.value,
+    urlInput.value,
+    openHyperlinkInNewTab.value,
+  )
 }
 
 const handleToggleOpenHyperlinkInNewTab = async function () {
   await nextTick()
 
-  pageBuilder.handleHyperlink(hyperlinkEnable.value, urlInput.value, openHyperlinkInNewTab.value)
+  pageBuilderClass.handleHyperlink(
+    hyperlinkEnable.value,
+    urlInput.value,
+    openHyperlinkInNewTab.value,
+  )
 }
 </script>
 
@@ -82,7 +90,7 @@ const handleToggleOpenHyperlinkInNewTab = async function () {
       <div v-if="getHyperlinkAbility === false" class="rounded-md bg-red-50 p-2">
         <div class="flex items-center">
           <div class="flex-shrink-0">
-            <ExclamationCircleIcon class="w-4 h-4 text-myPrimaryErrorColor"></ExclamationCircleIcon>
+            <span class="myMediumIcon material-symbols-outlined"> warning </span>
           </div>
           <div class="ml-2">
             <p class="text-sm font-medium text-green-800">
@@ -187,9 +195,7 @@ const handleToggleOpenHyperlinkInNewTab = async function () {
         <div v-if="getElementContainsHyperlink === false" class="rounded-md bg-red-50 p-2">
           <div class="flex items-center">
             <div class="flex-shrink-0">
-              <ExclamationCircleIcon
-                class="w-4 h-4 text-myPrimaryErrorColor"
-              ></ExclamationCircleIcon>
+              <span class="myMediumIcon material-symbols-outlined"> warning </span>
             </div>
             <div class="ml-2">
               <p class="text-sm font-medium text-green-800">No hyperlink added</p>

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

@@ -1,7 +1,7 @@
 <script setup>
-import { computed, onMounted, watch } from 'vue'
-import PageBuilder from '@/composables/PageBuilder.ts'
-import { ref } from 'vue'
+import { ref, computed, inject, watch } from 'vue'
+import EditorAccordion from '../EditorAccordion.vue'
+import PageBuilderClass from '@/composables/PageBuilderClass.ts'
 import tailwindOpacities from '@/utils/builder/tailwind-opacities'
 import {
   Listbox,
@@ -10,12 +10,11 @@ import {
   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 opacityVueModel = ref(null)
 const getBackgroundOpacity = computed(() => {
   return pageBuilderStateStore.getBackgroundOpacity
@@ -25,7 +24,7 @@ watch(
   getBackgroundOpacity,
   (newValue) => {
     opacityVueModel.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -71,7 +70,7 @@ watch(
             <ListboxOption
               as="template"
               v-for="backgroundOpacity in tailwindOpacities.backgroundOpacities"
-              @click="pageBuilder.handleBackgroundOpacity(backgroundOpacity)"
+              @click="pageBuilderClass.handleBackgroundOpacity(backgroundOpacity)"
               :key="backgroundOpacity"
               :value="backgroundOpacity"
               v-slot="{ active }"

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

@@ -1,7 +1,7 @@
 <script setup>
-import { computed, onMounted, watch } from 'vue'
-import PageBuilder from '@/composables/PageBuilder.ts'
-import { ref } from 'vue'
+import { ref, computed, inject, watch } from 'vue'
+import EditorAccordion from '../EditorAccordion.vue'
+import PageBuilderClass from '@/composables/PageBuilderClass.ts'
 import tailwindOpacities from '@/utils/builder/tailwind-opacities'
 import {
   Listbox,
@@ -10,12 +10,11 @@ import {
   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 opacityVueModel = ref(null)
 const getOpacity = computed(() => {
   return pageBuilderStateStore.getOpacity
@@ -25,7 +24,7 @@ watch(
   getOpacity,
   (newValue) => {
     opacityVueModel.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -71,7 +70,7 @@ watch(
             <ListboxOption
               as="template"
               v-for="elementOpacity in tailwindOpacities.opacities"
-              @click="pageBuilder.handleOpacity(elementOpacity)"
+              @click="pageBuilderClass.handleOpacity(elementOpacity)"
               :key="elementOpacity"
               :value="elementOpacity"
               v-slot="{ active }"