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

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 }"

package/src/Components/PageBuilder/EditorMenu/Editables/PaddingPlusMargin.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 tailwindPaddingPlusMargin from '@/utils/builder/tailwind-padding-margin'
-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 fontVerticalPadding = ref(null)
 const fontHorizontalPadding = ref(null)
 const fontVerticalMargin = ref(null)
@@ -30,7 +30,7 @@ watch(
   getFontVerticalPadding,
   (newValue) => {
     fontVerticalPadding.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -38,7 +38,7 @@ watch(
   getFontHorizontalPadding,
   (newValue) => {
     fontHorizontalPadding.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -46,7 +46,7 @@ watch(
   getFontVerticalMargin,
   (newValue) => {
     fontVerticalMargin.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -54,7 +54,7 @@ watch(
   getFontHorizontalMargin,
   (newValue) => {
     fontHorizontalMargin.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -69,7 +69,7 @@ watch(
         <select
           v-model="fontVerticalPadding"
           class="myPrimarySelect"
-          @change="pageBuilder.handleVerticalPadding(fontVerticalPadding)"
+          @change="pageBuilderClass.handleVerticalPadding(fontVerticalPadding)"
         >
           <option disabled value="">Select</option>
           <option
@@ -85,7 +85,7 @@ watch(
         <select
           v-model="fontHorizontalPadding"
           class="myPrimarySelect"
-          @change="pageBuilder.handleHorizontalPadding(fontHorizontalPadding)"
+          @change="pageBuilderClass.handleHorizontalPadding(fontHorizontalPadding)"
         >
           <option disabled value="">Select</option>
           <option
@@ -102,7 +102,7 @@ watch(
         <select
           v-model="fontVerticalMargin"
           class="myPrimarySelect"
-          @change="pageBuilder.handleVerticalMargin(fontVerticalMargin)"
+          @change="pageBuilderClass.handleVerticalMargin(fontVerticalMargin)"
         >
           <option disabled value="">Select</option>
           <option
@@ -118,7 +118,7 @@ watch(
         <select
           v-model="fontHorizontalMargin"
           class="myPrimarySelect"
-          @change="pageBuilder.handleHorizontalMargin(fontHorizontalMargin)"
+          @change="pageBuilderClass.handleHorizontalMargin(fontHorizontalMargin)"
         >
           <option disabled value="">Select</option>
           <option

package/src/Components/PageBuilder/EditorMenu/Editables/TextColorEditor.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 textColor = ref(null)
 const getTextColor = computed(() => {
   return pageBuilderStateStore.getTextColor
@@ -24,7 +17,7 @@ watch(
   getTextColor,
   (newValue) => {
     textColor.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -60,7 +53,7 @@ watch(
           <ListboxOption
             as="template"
             v-for="color in tailwindColors.textColorVariables"
-            @click="pageBuilder.handleTextColor(textColor)"
+            @click="pageBuilderClass.handleTextColor(textColor)"
             :key="color"
             :value="color"
             v-slot="{ active, textColor }"

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

@@ -1,13 +1,15 @@
 <script setup>
-import PageBuilder from '@/composables/PageBuilder.ts'
-import EditorAccordion from '@/Components/PageBuilder/EditorMenu/EditorAccordion.vue'
+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 { computed, ref, watch } from 'vue'
-import { usePageBuilderStateStore } from '@/stores/page-builder-state'
 
-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 fontBase = ref(null)
 const fontDesktop = ref(null)
 const fontTablet = ref(null)
@@ -41,7 +43,7 @@ watch(
   getFontBase,
   (newValue) => {
     fontBase.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -49,7 +51,7 @@ watch(
   getFontDesktop,
   (newValue) => {
     fontDesktop.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -57,7 +59,7 @@ watch(
   getFontTablet,
   (newValue) => {
     fontTablet.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -65,7 +67,7 @@ watch(
   getFontMobile,
   (newValue) => {
     fontMobile.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -73,7 +75,7 @@ watch(
   getFontWeight,
   (newValue) => {
     fontWeight.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -81,7 +83,7 @@ watch(
   getFontFamily,
   (newValue) => {
     fontFamily.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -89,7 +91,7 @@ watch(
   getFontStyle,
   (newValue) => {
     fontStyle.value = newValue
-    pageBuilder.handlePageBuilderMethods()
+    pageBuilderClass.handlePageBuilderMethods()
   },
   { immediate: true },
 )
@@ -106,7 +108,7 @@ watch(
         <select
           v-model="fontBase"
           class="myPrimarySelect"
-          @change="pageBuilder.handleFontSize(fontBase)"
+          @change="pageBuilderClass.handleFontSize(fontBase)"
         >
           <option disabled value="">Select</option>
           <option v-for="fontSize in tailwindFontSizes.fontBase" :key="fontSize">
@@ -119,7 +121,7 @@ watch(
         <select
           v-model="fontDesktop"
           class="myPrimarySelect"
-          @change="pageBuilder.handleFontSize(fontDesktop)"
+          @change="pageBuilderClass.handleFontSize(fontDesktop)"
         >
           <option disabled value="">Select</option>
           <option v-for="fontSize in tailwindFontSizes.fontDesktop" :key="fontSize">
@@ -132,7 +134,7 @@ watch(
         <select
           v-model="fontTablet"
           class="myPrimarySelect"
-          @change="pageBuilder.handleFontSize(fontTablet)"
+          @change="pageBuilderClass.handleFontSize(fontTablet)"
         >
           <option disabled value="">Select</option>
           <option v-for="fontSize in tailwindFontSizes.fontTablet" :key="fontSize">
@@ -145,7 +147,7 @@ watch(
         <select
           v-model="fontMobile"
           class="myPrimarySelect"
-          @change="pageBuilder.handleFontSize(fontMobile)"
+          @change="pageBuilderClass.handleFontSize(fontMobile)"
         >
           <option disabled value="">Select</option>
           <option v-for="fontSize in tailwindFontSizes.fontMobile" :key="fontSize">
@@ -160,7 +162,7 @@ watch(
         <select
           v-model="fontWeight"
           class="myPrimarySelect"
-          @change="pageBuilder.handleFontWeight(fontWeight)"
+          @change="pageBuilderClass.handleFontWeight(fontWeight)"
         >
           <option disabled value="">Select</option>
           <option v-for="fontWeight in tailwindFontStyles.fontWeight" :key="fontWeight">
@@ -173,7 +175,7 @@ watch(
         <select
           v-model="fontFamily"
           class="myPrimarySelect"
-          @change="pageBuilder.handleFontFamily(fontFamily)"
+          @change="pageBuilderClass.handleFontFamily(fontFamily)"
         >
           <option disabled value="">Select</option>
           <option v-for="fontFamily in tailwindFontStyles.fontFamily" :key="fontFamily">
@@ -186,7 +188,7 @@ watch(
         <select
           v-model="fontStyle"
           class="myPrimarySelect"
-          @change="pageBuilder.handleFontStyle(fontStyle)"
+          @change="pageBuilderClass.handleFontStyle(fontStyle)"
         >
           <option disabled value="">Select</option>
           <option v-for="fontStyle in tailwindFontStyles.fontStyle" :key="fontStyle">

package/src/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue

@@ -1,49 +1,47 @@
 <script setup>
-import { computed, ref, watch } from 'vue';
-import ClassEditor from '@/Components/PageBuilder/EditorMenu/Editables/ClassEditor.vue';
-import ImageEditor from '@/Components/PageBuilder/EditorMenu/Editables/ImageEditor.vue';
-import OpacityEditor from '@/Components/PageBuilder/EditorMenu/Editables/OpacityEditor.vue';
-import Typography from '@/Components/PageBuilder/EditorMenu/Editables/Typography.vue';
-import PaddingPlusMargin from '@/Components/PageBuilder/EditorMenu/Editables/PaddingPlusMargin.vue';
-import DeleteElement from '@/Components/PageBuilder/EditorMenu/Editables/DeleteElement.vue';
-import BorderRadius from '@/Components/PageBuilder/EditorMenu/Editables/BorderRadius.vue';
-import BackgroundColorEditor from '@/Components/PageBuilder/EditorMenu/Editables/BackgroundColorEditor.vue';
-import Borders from '@/Components/PageBuilder/EditorMenu/Editables/Borders.vue';
-import LinkEditor from '@/Components/PageBuilder/EditorMenu/Editables/LinkEditor.vue';
-import TipTap from '@/Components/TipTap/TipTap.vue';
-import { usePageBuilderStateStore } from '@/stores/page-builder-state';
-import ElementEditor from '@/Components/PageBuilder/EditorMenu/Editables/ElementEditor.vue';
+import { computed, inject } from 'vue'
+import ClassEditor from '@/Components/PageBuilder/EditorMenu/Editables/ClassEditor.vue'
+import ImageEditor from '@/Components/PageBuilder/EditorMenu/Editables/ImageEditor.vue'
+import OpacityEditor from '@/Components/PageBuilder/EditorMenu/Editables/OpacityEditor.vue'
+import Typography from '@/Components/PageBuilder/EditorMenu/Editables/Typography.vue'
+import PaddingPlusMargin from '@/Components/PageBuilder/EditorMenu/Editables/PaddingPlusMargin.vue'
+import DeleteElement from '@/Components/PageBuilder/EditorMenu/Editables/DeleteElement.vue'
+import BorderRadius from '@/Components/PageBuilder/EditorMenu/Editables/BorderRadius.vue'
+import BackgroundColorEditor from '@/Components/PageBuilder/EditorMenu/Editables/BackgroundColorEditor.vue'
+import Borders from '@/Components/PageBuilder/EditorMenu/Editables/Borders.vue'
+import LinkEditor from '@/Components/PageBuilder/EditorMenu/Editables/LinkEditor.vue'
+import TipTap from '@/Components/TipTap/TipTap.vue'
+import EditGetElement from '@/Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue'
+import ElementEditor from '@/Components/PageBuilder/EditorMenu/Editables/ElementEditor.vue'
 
-const pageBuilderStateStore = usePageBuilderStateStore();
+// Get stores from parent PageBuilder component
+const pageBuilderStateStore = inject('pageBuilderStateStore')
 
 // emit
-const emit = defineEmits(['closeEditor']);
+const emit = defineEmits(['closeEditor'])
 
 // get current element tag
 const getElement = computed(() => {
-  return pageBuilderStateStore.getElement;
-});
+  return pageBuilderStateStore.getElement
+})
 
 // Get tagName of element
 const elementTag = computed(() => {
-  return getElement.value?.tagName;
-});
+  return getElement.value?.tagName
+})
 
 const isHeadingElement = computed(() => {
   return (
-    (getElement.value instanceof HTMLElement &&
-      getElement.value.innerText.trim() !== ' ') ||
+    (getElement.value instanceof HTMLElement && getElement.value.innerText.trim() !== ' ') ||
     getElement.value instanceof HTMLImageElement
-  );
-});
+  )
+})
 </script>
 
 <template>
   <div class="h-full w-80 bg-white">
     <div class="h-screen flex flex-col">
-      <div
-        class="flex flex-row justify-between pt-2.5 pr-4 pl-4 items-center mb-3"
-      >
+      <div class="flex flex-row justify-between pt-2.5 pr-4 pl-4 items-center mb-3">
         <button
           type="button"
           @click="$emit('closeEditor')"

package/src/Components/PageBuilder/NoneCustomMediaLibraryComponent.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>NoneCustomMediaLibraryComponent here for the page builder to add media if needed</div>
+</template>

package/src/Components/PageBuilder/NoneCustomSearchComponent.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import componentHelpers from '../../utils/html-elements/componentHelpers'
+import components from '../../utils/html-elements/component'
+import PageBuilderClass from '../../composables/PageBuilderClass'
+import { usePageBuilderModal } from '../../composables/usePageBuilderModal'
+import type { ComponentObject, PageBuilderStateStore, MediaLibraryStore } from '../../types'
+
+import { inject } from 'vue'
+
+// Get stores from parent PageBuilder component
+const pageBuilderStateStore = inject<PageBuilderStateStore>('pageBuilderStateStore')
+const mediaLibraryStore = inject<MediaLibraryStore>('mediaLibraryStore')
+
+// Get modal close function
+const { closeAddComponentModal } = usePageBuilderModal()
+
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore!, mediaLibraryStore!)
+
+// Super simple component addition with professional modal closing!
+const handleDropComponent = function (componentObject: ComponentObject) {
+  pageBuilderClass.addComponent(componentObject)
+  closeAddComponentModal()
+}
+
+// Helper function to convert ComponentData to ComponentObject
+const convertToComponentObject = function (comp: any): ComponentObject {
+  return {
+    id: null, // Generate ID when needed in PageBuilderClass
+    html_code: comp.html_code,
+    title: comp.title,
+  }
+}
+</script>
+
+<style scoped>
+/* Add any additional styling if needed */
+</style>
+
+<template>
+  <div class="p-4">
+    <!-- Helper Components Section -->
+    <div class="mb-8">
+      <h3 class="myQuaternaryHeader mb-4">Helper Components</h3>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+        <div
+          v-for="helper in componentHelpers"
+          :key="helper.title"
+          class="border border-gray-200 overflow-hidden hover:border-myPrimaryLinkColor duration-100 cursor-pointer p-4"
+          @click="handleDropComponent(helper)"
+        >
+          <div class="max-h-72 cursor-pointer object-contain bg-white mx-auto">
+            <div class="mr-2" v-html="helper.icon"></div>
+            <h4 class="myPrimaryParagraph text-sm font-normal">{{ helper.title }}</h4>
+          </div>
+          <div class="myPrimaryParagraph text-xs font-normal pt-2">
+            Click to add {{ helper.title.toLowerCase() }} component
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Regular Components Section -->
+    <div>
+      <h3 class="myQuaternaryHeader mb-4">Layout Components</h3>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+        <div
+          v-for="comp in components[0].components.data"
+          :key="comp.title"
+          class="border border-gray-200 overflow-hidden hover:border-myPrimaryLinkColor duration-100 cursor-pointer"
+          @click="handleDropComponent(convertToComponentObject(comp))"
+        >
+          <div
+            class="overflow-hidden whitespace-pre-line flex-1 h-auto border-b border-gray-200 lg:py-10 py-8 px-2"
+          >
+            <img
+              v-if="comp.cover_image"
+              :src="comp.cover_image"
+              :alt="comp.title"
+              class="max-h-72 cursor-pointer object-contain bg-white mx-auto"
+            />
+            <div v-else class="text-gray-500">{{ comp.title }}</div>
+          </div>
+          <div class="p-3">
+            <h4 class="myPrimaryParagraph text-sm font-normal">{{ comp.title }}</h4>
+            <div class="myPrimaryParagraph text-xs font-normal pt-2">Click to add component</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/Components/PageBuilder/PageBuilderSettings.vue

@@ -0,0 +1,8 @@
+<script setup>
+import { ref, onMounted, inject } from 'vue'
+import { Switch } from '@headlessui/vue'
+import Modal from '@/Components/Modals/Modal.vue'
+
+// Get stores from parent PageBuilder component
+const pageBuilderStateStore = inject('pageBuilderStateStore')
+</script>