@myissue/vue-website-page-builder 3.0.18 → 3.0.20

package/src/Components/Modals/PageBuilderPreviewModal.vue

@@ -1,6 +1,6 @@
 <script setup>
-import Modal from '@/Components/Modals/Modal.vue';
-import { delay } from '@/composables/delay';
+import { computed, inject } from 'vue'
+import { delay } from '@/composables/delay'
 
 import {
   Dialog,
@@ -8,11 +8,11 @@ import {
   DialogTitle,
   TransitionChild,
   TransitionRoot,
-} from '@headlessui/vue';
-import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
-import { useUserStore } from '@/stores/user';
+} from '@headlessui/vue'
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 
-const userStore = useUserStore();
+// Get stores from parent PageBuilder component
+const userStore = inject('userStore')
 
 defineProps({
   show: {
@@ -20,30 +20,27 @@ defineProps({
     default: false,
     required: true,
   },
-});
+})
 
-const emit = defineEmits(['firstPageBuilderPreviewModalButton']);
+const emit = defineEmits(['firstPageBuilderPreviewModalButton'])
 
 // first button function
 const firstButton = async function () {
-  emit('firstPageBuilderPreviewModalButton');
+  emit('firstPageBuilderPreviewModalButton')
 
-  userStore.setIsLoading(true);
-  await delay();
-  userStore.setIsLoading(false);
-};
+  userStore.setIsLoading(true)
+  await delay()
+  userStore.setIsLoading(false)
+}
 
 const handleEscapeKey = function () {
-  firstButton();
-};
+  firstButton()
+}
 </script>
 
 <template>
   <teleport to="body">
-    <TransitionRoot
-      :show="show"
-      as="template"
-    >
+    <TransitionRoot :show="show" as="template">
       <Dialog
         @close="firstButton"
         @keydown.escape.prevent="handleEscapeKey"
@@ -51,9 +48,7 @@ const handleEscapeKey = function () {
         class="fixed z-30 inset-0 overflow-y-auto focus:outline-none"
         tabindex="0"
       >
-        <div
-          class="flex items-end justify-center pb-20 text-center sm:block sm:p-0 bg-white"
-        >
+        <div class="flex items-end justify-center pb-20 text-center sm:block sm:p-0 bg-white">
           <TransitionChild
             as="template"
             enter="ease-out duration-100"
@@ -63,15 +58,11 @@ const handleEscapeKey = function () {
             leave-from="opacity-100"
             leave-to="opacity-100"
           >
-            <DialogOverlay
-              class="fixed inset-0 bg-opacity-75 transition-opacity"
-            />
+            <DialogOverlay class="fixed inset-0 bg-opacity-75 transition-opacity" />
           </TransitionChild>
 
           <!-- This element is to trick the browser into centering the modal contents. -->
-          <span
-            aria-hidden="true"
-            class="hidden sm:inline-block sm:align-middle sm:h-screen"
+          <span aria-hidden="true" class="hidden sm:inline-block sm:align-middle sm:h-screen"
             >&#8203;</span
           >
           <TransitionChild
@@ -89,23 +80,14 @@ const handleEscapeKey = function () {
               <div
                 class="px-4 px-4 lg:h-[10vh] h-[16vh] flex items-center justify-between border-b border-gray-200 bg-white"
               >
-                <button
-                  type="button"
-                  @click="firstButton"
-                >
-                  <img
-                    class="h-6"
-                    src="/logo/logo.svg"
-                    alt="Logo"
-                  />
+                <button type="button" @click="firstButton">
+                  <img class="h-6" src="/logo/logo.svg" alt="Logo" />
                 </button>
                 <div
                   @click="firstButton"
                   class="flex items-center justify-center gap-1 cursor-pointer"
                 >
-                  <span class="myPrimaryParagraph font-medium">
-                    Close Preview
-                  </span>
+                  <span class="myPrimaryParagraph font-medium"> Close Preview </span>
                   <div
                     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"
                   >

package/src/Components/PageBuilder/AdvancedPageBuilderSettings.vue

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

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