@myissue/vue-website-page-builder 3.1.13 → 3.1.15

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

@@ -1,22 +1,18 @@
 <script setup>
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
-import PageBuilderClass from '@/composables/PageBuilderClass.ts'
+import PageBuilderClass from '../../../composables/PageBuilderClass'
 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 PageBuilderPreviewModal from '../../Modals/PageBuilderPreviewModal.vue'
+import Preview from '../../../PageBuilder/Preview.vue'
+import SlideOverRight from '../Slidebars/SlideOverRight.vue'
+import PageBuilderSettings from '../Settings/PageBuilderSettings.vue'
+import DynamicModalBuilder from '../../Modals/DynamicModalBuilder.vue'
 
 // Get consolidated store from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')
 
-const getCurrentUser = computed(() => {
-  return pageBuilderStateStore.getCurrentUser
-})
-
-const getCurrentResourceData = computed(() => {
-  return pageBuilderStateStore.getCurrentResourceData
+const getConfigPageBuilder = computed(() => {
+  return pageBuilderStateStore.getConfigPageBuilder
 })
 
 const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
@@ -33,9 +29,9 @@ const firstButtonModal = ref('')
 const secondButtonModal = ref(null)
 const thirdButtonModal = ref(null)
 // set dynamic modal handle functions
-const firstModalButtonFunction = ref(null)
-const secondModalButtonFunction = ref(null)
-const thirdModalButtonFunction = ref(null)
+const firstModalButtonFunctionDynamicModalBuilder = ref(null)
+const secondModalButtonFunctionDynamicModalBuilder = ref(null)
+const thirdModalButtonFunctionDynamicModalBuilder = ref(null)
 
 const showSettingsSlideOverRight = ref(false)
 const titleSettingsSlideOverRight = ref(null)
@@ -64,12 +60,12 @@ const deleteAllComponents = function () {
   thirdButtonModal.value = 'Delete'
 
   // handle click
-  firstModalButtonFunction.value = function () {
+  firstModalButtonFunctionDynamicModalBuilder.value = function () {
     showModalDeleteAllComponents.value = false
   }
   //
   // handle click
-  thirdModalButtonFunction.value = function () {
+  thirdModalButtonFunctionDynamicModalBuilder.value = function () {
     pageBuilderClass.deleteAllComponents()
     pageBuilderStateStore.setComponents(null)
     showModalDeleteAllComponents.value = false
@@ -101,8 +97,8 @@ const settingsSlideOverButton = function () {
     >
       <PageBuilderSettings> </PageBuilderSettings>
     </SlideOverRight>
-    <DynamicModal
-      :showDynamicModal="showModalDeleteAllComponents"
+    <DynamicModalBuilder
+      :showDynamicModalBuilder="showModalDeleteAllComponents"
       :type="typeModal"
       :gridColumnAmount="gridColumnModal"
       :title="titleModal"
@@ -110,13 +106,13 @@ const settingsSlideOverButton = function () {
       :firstButtonText="firstButtonModal"
       :secondButtonText="secondButtonModal"
       :thirdButtonText="thirdButtonModal"
-      @firstModalButtonFunction="firstModalButtonFunction"
-      @secondModalButtonFunction="secondModalButtonFunction"
-      @thirdModalButtonFunction="thirdModalButtonFunction"
+      @firstModalButtonFunctionDynamicModalBuilder="firstModalButtonFunctionDynamicModalBuilder"
+      @secondModalButtonFunctionDynamicModalBuilder="secondModalButtonFunctionDynamicModalBuilder"
+      @thirdModalButtonFunctionDynamicModalBuilder="thirdModalButtonFunctionDynamicModalBuilder"
     >
       <header></header>
       <main></main>
-    </DynamicModal>
+    </DynamicModalBuilder>
     <Menu as="div" class="myPrimaryParagraph relative lg:inline-block hidden text-left">
       <div>
         <MenuButton
@@ -139,7 +135,13 @@ const settingsSlideOverButton = function () {
           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">
+            <template
+              v-if="
+                getConfigPageBuilder &&
+                getConfigPageBuilder.userForPageBuilder &&
+                getConfigPageBuilder.userForPageBuilder.name
+              "
+            >
               <MenuItem v-slot="{ active }">
                 <div
                   class="cursor-defualt"
@@ -155,16 +157,59 @@ const settingsSlideOverButton = function () {
                       <span class="material-symbols-outlined text-[16px]"> person </span>
                     </div>
                     <div>
-                      {{ getCurrentUser.name }}
+                      {{ getConfigPageBuilder.userForPageBuilder.name }}
                     </div>
                   </div>
                 </div>
               </MenuItem>
             </template>
-            <template v-if="getCurrentResourceData && getCurrentResourceData.title">
+
+            <p>
+              <template
+                v-if="
+                  getConfigPageBuilder &&
+                  typeof getConfigPageBuilder.updateOrCreate === 'string' &&
+                  getConfigPageBuilder.updateOrCreate.length > 0 &&
+                  getConfigPageBuilder.resourceData &&
+                  getConfigPageBuilder.resourceData.title
+                "
+              >
+                <MenuItem v-slot="{ active }">
+                  <div
+                    class="cursor-default"
+                    :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-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]"> bookmark </span>
+                      </div>
+                      <div>
+                        <div class="text-[10px] text-gray-500">
+                          {{
+                            getConfigPageBuilder.updateOrCreate === 'create'
+                              ? 'Crating new Resource'
+                              : 'Updating existing Resource'
+                          }}
+                        </div>
+                        {{
+                          getConfigPageBuilder &&
+                          getConfigPageBuilder.resourceData &&
+                          getConfigPageBuilder.resourceData.title
+                        }}
+                      </div>
+                    </div>
+                  </div>
+                </MenuItem>
+              </template>
               <MenuItem v-slot="{ active }">
                 <div
-                  class="cursor-default"
+                  @click="handlePageBuilderPreview"
+                  class="cursor-pointer"
                   :class="[
                     active ? 'bg-myPrimaryLightGrayColor text-gray-900' : 'text-gray-700',
                     'block px-4 py-2',
@@ -172,75 +217,56 @@ const settingsSlideOverButton = function () {
                 >
                   <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"
+                      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]"> post </span>
-                    </div>
-                    <div>
-                      {{ getCurrentResourceData.title }}
+                      <span class="material-symbols-outlined text-[16px]"> visibility </span>
                     </div>
+                    Preview
                   </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>
-              </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">
-                  <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>
+
+              <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>
-                  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="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>
-                  <span class="group-hover:text-white"> Clear page </span>
                 </div>
-              </div>
-            </MenuItem>
+              </MenuItem>
+            </p>
           </div>
         </MenuItems>
       </transition>

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

@@ -1,8 +1,8 @@
 <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 PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
+import tailwindColors from '../../../../utils/builder/tailwaind-colors'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')

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

@@ -1,8 +1,8 @@
 <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 PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
+import tailwindBorderRadius from '../../../../utils/builder/tailwind-border-radius'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')

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

@@ -1,9 +1,9 @@
 <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 tailwindColors from '@/utils/builder/tailwaind-colors'
+import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
+import tailwindBorderStyleWidthPlusColor from '../../../../utils/builder/tailwind-border-style-width-color'
+import tailwindColors from '../../../../utils/builder/tailwaind-colors'
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
 
 // Get stores from parent PageBuilder component

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

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed, inject, watch } from 'vue'
 import EditorAccordion from '../EditorAccordion.vue'
-import PageBuilderClass from '@/composables/PageBuilderClass.ts'
+import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')

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

@@ -1,7 +1,7 @@
 <script setup>
-import DynamicModal from '@/Components/Modals/DynamicModal.vue'
+import DynamicModalBuilder from '../../../Modals/DynamicModalBuilder.vue'
 import { computed, inject } from 'vue'
-import PageBuilderClass from '@/composables/PageBuilderClass.ts'
+import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
 import { ref } from 'vue'
 
 // Get stores from parent PageBuilder component
@@ -17,9 +17,9 @@ const firstButtonModal = ref('')
 const secondButtonModal = ref(null)
 const thirdButtonModal = ref(null)
 // set dynamic modal handle functions
-const firstModalButtonFunction = ref(null)
-const secondModalButtonFunction = ref(null)
-const thirdModalButtonFunction = ref(null)
+const firstModalButtonFunctionDynamicModalBuilder = ref(null)
+const secondModalButtonFunctionDynamicModalBuilder = ref(null)
+const thirdModalButtonFunctionDynamicModalBuilder = ref(null)
 const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
 // remove component
@@ -34,12 +34,12 @@ const deleteComponent = function (e) {
   thirdButtonModal.value = 'Delete'
 
   // handle click
-  firstModalButtonFunction.value = function () {
+  firstModalButtonFunctionDynamicModalBuilder.value = function () {
     showModalDeleteComponent.value = false
   }
   //
   // handle click
-  thirdModalButtonFunction.value = function () {
+  thirdModalButtonFunctionDynamicModalBuilder.value = function () {
     pageBuilderClass.deleteComponent()
 
     showModalDeleteComponent.value = false
@@ -49,8 +49,8 @@ const deleteComponent = function (e) {
 </script>
 
 <template>
-  <DynamicModal
-    :showDynamicModal="showModalDeleteComponent"
+  <DynamicModalBuilder
+    :showDynamicModalBuilder="showModalDeleteComponent"
     :type="typeModal"
     :gridColumnAmount="gridColumnModal"
     :title="titleModal"
@@ -58,13 +58,13 @@ const deleteComponent = function (e) {
     :firstButtonText="firstButtonModal"
     :secondButtonText="secondButtonModal"
     :thirdButtonText="thirdButtonModal"
-    @firstModalButtonFunction="firstModalButtonFunction"
-    @secondModalButtonFunction="secondModalButtonFunction"
-    @thirdModalButtonFunction="thirdModalButtonFunction"
+    @firstModalButtonFunctionDynamicModalBuilder="firstModalButtonFunctionDynamicModalBuilder"
+    @secondModalButtonFunctionDynamicModalBuilder="secondModalButtonFunctionDynamicModalBuilder"
+    @thirdModalButtonFunctionDynamicModalBuilder="thirdModalButtonFunctionDynamicModalBuilder"
   >
     <header></header>
     <main></main>
-  </DynamicModal>
+  </DynamicModalBuilder>
   <div class="flex flex-col items-center justify-center myPrimaryGap">
     <div class="flex gap-2 items-center justify-center">
       <div

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

@@ -1,7 +1,7 @@
 <script setup>
 import EditorAccordion from '../EditorAccordion.vue'
 import { computed, inject } from 'vue'
-import PageBuilderClass from '@/composables/PageBuilderClass.ts'
+import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')

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

@@ -1,11 +1,11 @@
 <script setup>
 import { ref, computed, inject } from 'vue'
-import DynamicModal from '@/Components/Modals/DynamicModal.vue'
-import TipTapInput from '@/Components/TipTap/TipTapInput.vue'
-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 DynamicModalBuilder from '../../../Modals/DynamicModalBuilder.vue'
+import TipTapInput from '../../../TipTap/TipTapInput.vue'
+import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
+import MediaLibraryModal from '../../../Modals/MediaLibraryModal.vue'
+import TextColorEditor from './TextColorEditor.vue'
+import BackgroundColorEditor from './BackgroundColorEditor.vue'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')
@@ -43,9 +43,9 @@ const firstButtonModal = ref('')
 const secondButtonModal = ref(null)
 const thirdButtonModal = ref(null)
 // set dynamic modal handle functions
-const firstModalButtonFunction = ref(null)
-const secondModalButtonFunction = ref(null)
-const thirdModalButtonFunction = ref(null)
+const firstModalButtonFunctionDynamicModalBuilder = ref(null)
+const secondModalButtonFunctionDynamicModalBuilder = ref(null)
+const thirdModalButtonFunctionDynamicModalBuilder = ref(null)
 
 const handleModalPreviewTiptap = function () {
   pageBuilderStateStore.setShowModalTipTap(true)
@@ -60,11 +60,11 @@ const handleModalPreviewTiptap = function () {
 
   // handle click
 
-  firstModalButtonFunction.value = function () {
+  firstModalButtonFunctionDynamicModalBuilder.value = function () {
     pageBuilderStateStore.setShowModalTipTap(false)
   }
 
-  thirdModalButtonFunction.value = function () {
+  thirdModalButtonFunctionDynamicModalBuilder.value = function () {
     pageBuilderStateStore.setShowModalTipTap(false)
   }
 }
@@ -168,11 +168,11 @@ const handleModalIframeSrc = function () {
   thirdButtonModal.value = null
 
   // handle click
-  firstModalButtonFunction.value = function () {
+  firstModalButtonFunctionDynamicModalBuilder.value = function () {
     showModalIframeSrc.value = false
   }
   // handle click
-  secondModalButtonFunction.value = function () {
+  secondModalButtonFunctionDynamicModalBuilder.value = function () {
     const isNotValidated = validateURL()
     if (isNotValidated) {
       return
@@ -204,8 +204,8 @@ const handleModalIframeSrc = function () {
 </script>
 <template>
   <div>
-    <DynamicModal
-      :showDynamicModal="showModalIframeSrc"
+    <DynamicModalBuilder
+      :showDynamicModalBuilder="showModalIframeSrc"
       maxWidth="2xl"
       :type="typeModal"
       :gridColumnAmount="gridColumnModal"
@@ -214,9 +214,9 @@ const handleModalIframeSrc = function () {
       :firstButtonText="firstButtonModal"
       :secondButtonText="secondButtonModal"
       :thirdButtonText="thirdButtonModal"
-      @firstModalButtonFunction="firstModalButtonFunction"
-      @secondModalButtonFunction="secondModalButtonFunction"
-      @thirdModalButtonFunction="thirdModalButtonFunction"
+      @firstModalButtonFunctionDynamicModalBuilder="firstModalButtonFunctionDynamicModalBuilder"
+      @secondModalButtonFunctionDynamicModalBuilder="secondModalButtonFunctionDynamicModalBuilder"
+      @thirdModalButtonFunctionDynamicModalBuilder="thirdModalButtonFunctionDynamicModalBuilder"
     >
       <header></header>
       <main>
@@ -234,10 +234,10 @@ const handleModalIframeSrc = function () {
           </div>
         </div>
       </main>
-    </DynamicModal>
-    <DynamicModal
+    </DynamicModalBuilder>
+    <DynamicModalBuilder
       :simpleModal="true"
-      :showDynamicModal="getShowModalTipTap"
+      :showDynamicModalBuilder="getShowModalTipTap"
       maxWidth="5xl"
       :type="typeModal"
       :gridColumnAmount="gridColumnModal"
@@ -246,15 +246,15 @@ const handleModalIframeSrc = function () {
       :firstButtonText="firstButtonModal"
       :secondButtonText="secondButtonModal"
       :thirdButtonText="thirdButtonModal"
-      @firstModalButtonFunction="firstModalButtonFunction"
-      @secondModalButtonFunction="secondModalButtonFunction"
-      @thirdModalButtonFunction="thirdModalButtonFunction"
+      @firstModalButtonFunctionDynamicModalBuilder="firstModalButtonFunctionDynamicModalBuilder"
+      @secondModalButtonFunctionDynamicModalBuilder="secondModalButtonFunctionDynamicModalBuilder"
+      @thirdModalButtonFunctionDynamicModalBuilder="thirdModalButtonFunctionDynamicModalBuilder"
     >
       <header></header>
       <main class="overflow-y-auto">
         <TipTapInput></TipTapInput>
       </main>
-    </DynamicModal>
+    </DynamicModalBuilder>
 
     <MediaLibraryModal
       :open="showMediaLibraryModal"

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

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, inject } from 'vue'
-import PageBuilderClass from '@/composables/PageBuilderClass.ts'
-import EditorAccordion from '@/Components/PageBuilder/EditorMenu/EditorAccordion.vue'
+import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
+import EditorAccordion from '../EditorAccordion.vue'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')

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

@@ -1,8 +1,8 @@
 <script setup>
 import { computed, watch, ref, inject } from 'vue'
-import EditorAccordion from '@/Components/PageBuilder/EditorMenu/EditorAccordion.vue'
-import MediaLibraryModal from '@/Components/Modals/MediaLibraryModal.vue'
-import PageBuilderClass from '@/composables/PageBuilderClass.ts'
+import EditorAccordion from '../EditorAccordion.vue'
+import MediaLibraryModal from '../../../Modals/MediaLibraryModal.vue'
+import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')

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

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed, inject, watch, nextTick } from 'vue'
 import EditorAccordion from '../EditorAccordion.vue'
-import PageBuilderClass from '@/composables/PageBuilderClass.ts'
+import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
 import { Switch } from '@headlessui/vue'
 
 // Get stores from parent PageBuilder component

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

@@ -1,8 +1,8 @@
 <script setup>
 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 PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
+import tailwindOpacities from '../../../../utils/builder/tailwind-opacities'
 import {
   Listbox,
   ListboxButton,

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

@@ -1,8 +1,8 @@
 <script setup>
 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 PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
+import tailwindOpacities from '../../../../utils/builder/tailwind-opacities'
 import {
   Listbox,
   ListboxButton,

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

@@ -1,7 +1,7 @@
 <script setup>
-import EditorAccordion from '@/Components/PageBuilder/EditorMenu/EditorAccordion.vue';
-import ManageBackgroundOpacity from '@/Components/PageBuilder/EditorMenu/Editables/ManageBackgroundOpacity.vue';
-import ManageOpacity from '@/Components/PageBuilder/EditorMenu/Editables/ManageOpacity.vue';
+import EditorAccordion from '../EditorAccordion.vue'
+import ManageBackgroundOpacity from './ManageBackgroundOpacity.vue'
+import ManageOpacity from './ManageOpacity.vue'
 </script>
 
 <template>

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

@@ -1,8 +1,8 @@
 <script setup>
 import { ref, computed, inject, watch } from 'vue'
 import EditorAccordion from '../EditorAccordion.vue'
-import PageBuilderClass from '@/composables/PageBuilderClass.ts'
-import tailwindPaddingPlusMargin from '@/utils/builder/tailwind-padding-margin'
+import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
+import tailwindPaddingPlusMargin from '../../../../utils/builder/tailwind-padding-margin'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')

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

@@ -1,8 +1,8 @@
 <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 PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
+import tailwindColors from '../../../../utils/builder/tailwaind-colors'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')

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

@@ -1,9 +1,9 @@
 <script setup>
 import { ref, computed, inject, watch } from 'vue'
 import EditorAccordion from '../EditorAccordion.vue'
-import PageBuilderClass from '@/composables/PageBuilderClass.ts'
-import tailwindFontSizes from '@/utils/builder/tailwind-font-sizes'
-import tailwindFontStyles from '@/utils/builder/tailwind-font-styles'
+import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
+import tailwindFontSizes from '../../../../utils/builder/tailwind-font-sizes'
+import tailwindFontStyles from '../../../../utils/builder/tailwind-font-styles'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')