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

package/src/Components/PageBuilder/Settings/AdvancedPageBuilderSettings.vue

@@ -1,33 +1,32 @@
 <script setup>
-import { ref, computed } from 'vue';
-import { usePageBuilderStateStore } from '@/stores/page-builder-state';
+import { ref, computed, inject } from 'vue'
+
+// Get stores from parent PageBuilder component
+const pageBuilderStateStore = inject('pageBuilderStateStore')
 
-const pageBuilderStateStore = usePageBuilderStateStore();
 const getElement = computed(() => {
-  return pageBuilderStateStore.getElement;
-});
+  return pageBuilderStateStore.getElement
+})
 const getComponent = computed(() => {
-  return pageBuilderStateStore.getComponent;
-});
+  return pageBuilderStateStore.getComponent
+})
 const getComponents = computed(() => {
-  return pageBuilderStateStore.getComponents;
-});
-const current = ref('element');
+  return pageBuilderStateStore.getComponents
+})
+const current = ref('element')
 
 const updateCurrentTab = function (tab) {
-  current.value = tab;
-};
+  current.value = tab
+}
 </script>
 
 <template>
   <div class="my-8">
-    <div
-      class="flex items-left flex-col myPrimaryGap border-myPrimaryMediumGrayColor"
-    >
+    <div class="flex items-left flex-col myPrimaryGap border-myPrimaryMediumGrayColor">
       <h4 class="myQuaternaryHeader">Selected HTML</h4>
       <p class="myPrimaryParagraph text-xs">
-        Overview of Selected Element, Component, and Components. This section
-        provides real-time updates based on your HTML selection.
+        Overview of Selected Element, Component, and Components. This section provides real-time
+        updates based on your HTML selection.
       </p>
 
       <!-- Types - start -->
@@ -35,55 +34,33 @@ const updateCurrentTab = function (tab) {
         <h4 class="myPrimaryParagraph text-sm pb-2">Types</h4>
         <div class="text-white overflow-hidden bg-gray-900 max-w-2xl">
           <div class="flex bg-gray-800/40 ring-1 ring-white/5">
-            <div
-              class="-mb-px flex text-xs font-medium text-myPrimaryMediumGrayColor"
-            >
+            <div class="-mb-px flex text-xs font-medium text-myPrimaryMediumGrayColor">
               <div class="px-4 py-4 text-white">Types</div>
             </div>
           </div>
           <div class="px-4 pb-8 pt-4 text-white text-xs">
-            <p
-              v-if="getElement === null || getElement === undefined"
-              class="text-xs pb-2"
-            ></p>
-            <p
-              v-if="getElement !== null && getElement !== undefined"
-              class="text-xs pb-2"
-            >
+            <p v-if="getElement === null || getElement === undefined" class="text-xs pb-2"></p>
+            <p v-if="getElement !== null && getElement !== undefined" class="text-xs pb-2">
               <span>Element type: </span>
               <span>
                 {{ typeof getElement }}
               </span>
             </p>
 
-            <p
-              v-if="getComponent === null || getComponent === undefined"
-              class="text-xs pb-2"
-            >
+            <p v-if="getComponent === null || getComponent === undefined" class="text-xs pb-2">
               <span>Component type: </span>
               {{ JSON.stringify(getComponent) }}
             </p>
-            <p
-              v-if="getComponent !== null && getComponent !== undefined"
-              class="text-xs pb-2"
-            >
+            <p v-if="getComponent !== null && getComponent !== undefined" class="text-xs pb-2">
               <span>Component type: </span>
               <span>
-                {{
-                  Array.isArray(getComponent) === true
-                    ? 'array'
-                    : typeof getComponent
-                }}
+                {{ Array.isArray(getComponent) === true ? 'array' : typeof getComponent }}
               </span>
             </p>
             <p class="text-xs pb-2">
               <span>Components: </span>
               <span>
-                {{
-                  Array.isArray(getComponents) === true
-                    ? 'array'
-                    : typeof getComponents
-                }}
+                {{ Array.isArray(getComponents) === true ? 'array' : typeof getComponents }}
               </span>
             </p>
           </div>
@@ -95,9 +72,7 @@ const updateCurrentTab = function (tab) {
         <h4 class="myPrimaryParagraph text-sm pb-2">Content</h4>
         <div class="overflow-hidden bg-gray-900 max-w-2xl">
           <div class="flex bg-gray-800/40 ring-1 ring-white/5">
-            <div
-              class="-mb-px flex text-xs font-medium text-myPrimaryMediumGrayColor"
-            >
+            <div class="-mb-px flex text-xs font-medium text-myPrimaryMediumGrayColor">
               <div
                 @click="updateCurrentTab('element')"
                 class="px-4 py-4 cursor-pointer"
@@ -125,45 +100,29 @@ const updateCurrentTab = function (tab) {
           <div class="px-4 pb-8 pt-4 text-white text-xs break-all">
             <div v-if="current === 'element'">
               <div v-if="getElement">
-                <div
-                  class="flex flex-col gap-4 border-b border-white mb-4 pb-4"
-                >
+                <div class="flex flex-col gap-4 border-b border-white mb-4 pb-4">
                   <p>Selected element outerHTML:</p>
                   <p class="whitespace-pre-line leading-5">
                     {{ getElement?.outerHTML }}
                   </p>
                 </div>
-                <div
-                  class="flex flex-col gap-2 mt-4 border-b border-white mb-4 pb-4"
-                >
+                <div class="flex flex-col gap-2 mt-4 border-b border-white mb-4 pb-4">
                   <p>Selected element src:</p>
                   <p class="whitespace-pre-line leading-5">
-                    {{
-                      getElement?.src ? getElement?.src : typeof getElement?.src
-                    }}
+                    {{ getElement?.src ? getElement?.src : typeof getElement?.src }}
                   </p>
                 </div>
-                <div
-                  class="flex flex-col gap-2 mt-4 border-b border-white mb-4 pb-4"
-                >
+                <div class="flex flex-col gap-2 mt-4 border-b border-white mb-4 pb-4">
                   <p>Selected element href:</p>
                   <p class="whitespace-pre-line leading-5">
-                    {{
-                      getElement?.href
-                        ? getElement?.href
-                        : typeof getElement?.href
-                    }}
+                    {{ getElement?.href ? getElement?.href : typeof getElement?.href }}
                   </p>
                 </div>
-                <div
-                  class="flex flex-col gap-2 mt-4 border-b border-white mb-4 pb-4"
-                >
+                <div class="flex flex-col gap-2 mt-4 border-b border-white mb-4 pb-4">
                   <p>Selected element class:</p>
                   <p class="whitespace-pre-line leading-5">
                     {{
-                      getElement?.classList
-                        ? getElement?.classList
-                        : typeof getElement?.classList
+                      getElement?.classList ? getElement?.classList : typeof getElement?.classList
                     }}
                   </p>
                 </div>

package/src/Components/PageBuilder/Settings/PageBuilderSettings.vue

@@ -1,56 +1,56 @@
 <script setup>
-import SlideOverRightParent from '@/Components/PageBuilder/Slidebars/SlideOverRightParent.vue';
-import AdvancedPageBuilderSettings from '@/Components/PageBuilder/Settings/AdvancedPageBuilderSettings.vue';
-import { ref, computed } from 'vue';
-import fullHTMLContent from '@/utils/builder/html-doc-declaration-with-components';
-import { usePageBuilderStateStore } from '@/stores/page-builder-state';
+import SlideOverRightParent from '@/Components/PageBuilder/Slidebars/SlideOverRightParent.vue'
+import AdvancedPageBuilderSettings from '@/Components/PageBuilder/Settings/AdvancedPageBuilderSettings.vue'
+import { ref, computed, onMounted, inject } from 'vue'
+import fullHTMLContent from '@/utils/builder/html-doc-declaration-with-components'
 
-const pageBuilderStateStore = usePageBuilderStateStore();
+// Get stores from parent PageBuilder component
+const pageBuilderStateStore = inject('pageBuilderStateStore')
 
-const showAdvancedSettingsSlideOverRight = ref(false);
-const titleSettingsSlideOverRight = ref('');
-const downloadedComponents = ref(null);
+const showAdvancedSettingsSlideOverRight = ref(false)
+const titleSettingsSlideOverRight = ref('')
+const downloadedComponents = ref(null)
 
 // handle slideover window
 const handleAdvancedSettingsSlideOver = function () {
-  titleSettingsSlideOverRight.value = 'Advanced Settings';
-  showAdvancedSettingsSlideOverRight.value = true;
-};
+  titleSettingsSlideOverRight.value = 'Advanced Settings'
+  showAdvancedSettingsSlideOverRight.value = true
+}
 
 // handle slideover window
 const settingsAdvancedSlideOverButton = function () {
-  showAdvancedSettingsSlideOverRight.value = false;
-};
+  showAdvancedSettingsSlideOverRight.value = false
+}
 
 const getComponents = computed(() => {
-  return pageBuilderStateStore.getComponents;
-});
+  return pageBuilderStateStore.getComponents
+})
 
 // generate HTML
 const generateHTML = function (filename, HTML) {
-  const element = document.createElement('a');
+  const element = document.createElement('a')
   element.setAttribute(
     'href',
-    'data:text/html;charset=utf-8,' + encodeURIComponent(fullHTMLContent(HTML))
-  );
-  element.setAttribute('download', filename);
+    'data:text/html;charset=utf-8,' + encodeURIComponent(fullHTMLContent(HTML)),
+  )
+  element.setAttribute('download', filename)
 
-  element.style.display = 'none';
-  document.body.appendChild(element);
+  element.style.display = 'none'
+  document.body.appendChild(element)
 
-  element.click();
+  element.click()
 
-  document.body.removeChild(element);
-};
+  document.body.removeChild(element)
+}
 
 // handle download HTML
 const handleDownloadHTML = function () {
   downloadedComponents.value = getComponents.value.map((component) => {
-    return component.html_code;
-  });
+    return component.html_code
+  })
 
-  generateHTML('downloaded_html.html', downloadedComponents.value.join(''));
-};
+  generateHTML('downloaded_html.html', downloadedComponents.value.join(''))
+}
 </script>
 
 <template>
@@ -66,8 +66,8 @@ const handleDownloadHTML = function () {
     <div class="flex items-left flex-col gap-1">
       <h3 class="myQuaternaryHeader">Advanced Settings</h3>
       <p class="myPrimaryParagraph text-xs">
-        Manage advanced settings here. Like an overview of Selected Element,
-        Component, and Components in real-time.
+        Manage advanced settings here. Like an overview of Selected Element, Component, and
+        Components in real-time.
       </p>
     </div>
     <div class="mt-4">
@@ -88,11 +88,7 @@ const handleDownloadHTML = function () {
       <p class="myPrimaryParagraph text-xs">Download current page layout.</p>
     </div>
     <div class="mt-4">
-      <button
-        @click="handleDownloadHTML"
-        type="button"
-        class="myPrimaryButton text-xs"
-      >
+      <button @click="handleDownloadHTML" type="button" class="myPrimaryButton text-xs">
         Download HTML file
       </button>
     </div>

package/src/Components/Search/SearchComponents.vue

@@ -1,14 +1,7 @@
 <script setup>
 import Modal from '@/Components/Modals/Modal.vue'
-import { ref, computed, onMounted, onBeforeMount, nextTick } from 'vue'
-import componentHelpers from '@/utils/builder/html-elements/componentHelpers'
-import PageBuilder from '@/composables/PageBuilder.ts'
-import SmallUniversalSpinner from '@/Components/Loaders/SmallUniversalSpinner.vue'
-import { usePageBuilderStateStore } from '@/stores/page-builder-state'
-import { useMediaLibraryStore } from '@/stores/media-library'
+import NoneCustomSearchComponent from '@/Components/PageBuilder/NoneCustomSearchComponent.vue'
 
-const mediaLibraryStore = useMediaLibraryStore()
-const pageBuilderStateStore = usePageBuilderStateStore()
 const props = defineProps({
   firstButtonText: {
     required: true,
@@ -21,6 +14,10 @@ const props = defineProps({
     default: false,
     required: true,
   },
+  CustomSearchComponent: {
+    type: Object,
+    default: null,
+  },
 })
 const emit = defineEmits(['firstModalButtonSearchComponentsFunction'])
 
@@ -28,81 +25,6 @@ const emit = defineEmits(['firstModalButtonSearchComponentsFunction'])
 const firstButton = function () {
   emit('firstModalButtonSearchComponentsFunction')
 }
-
-const search_query = ref('')
-const categorySelected = ref({ name: 'Components', id: null })
-
-const handlecategorySelected = function (category) {
-  categorySelected.value = category
-}
-const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
-
-const getFetchedComponents = computed(() => {
-  return pageBuilderStateStore.getFetchedComponents
-})
-
-const getComponentArrayAddMethod = computed(() => {
-  return pageBuilderStateStore.getComponentArrayAddMethod
-})
-
-const handleDropComponent = async function (componentObject) {
-  await nextTick()
-  const clonedComponent = pageBuilder.cloneCompObjForDOMInsertion({
-    html_code: componentObject.html_code,
-    id: componentObject.id,
-  })
-
-  await nextTick()
-
-  pageBuilderStateStore.setPushComponents({
-    component: clonedComponent,
-    componentArrayAddMethod: getComponentArrayAddMethod.value,
-  })
-
-  await nextTick()
-  pageBuilder.setEventListenersForElements()
-
-  // Close modal
-  firstButton()
-}
-
-const handleAddHelperComponent = async function (helperComponentObject) {
-  await nextTick()
-  const clonedComponent = pageBuilder.cloneCompObjForDOMInsertion({
-    html_code: helperComponentObject.html_code,
-    id: helperComponentObject.id,
-  })
-
-  await nextTick()
-
-  pageBuilderStateStore.setPushComponents({
-    component: clonedComponent,
-    componentArrayAddMethod: getComponentArrayAddMethod.value,
-  })
-
-  await nextTick()
-  pageBuilder.setEventListenersForElements()
-
-  // Close modal
-  firstButton()
-}
-
-const fetchComponents = function (page) {
-  //remember old search value while paginating
-  if (getFetchedComponents.value?.fetchedData?.oldInput?.search_query) {
-    search_query.value = getFetchedComponents.value?.fetchedData?.oldInput?.search_query
-  }
-  //
-  pageBuilderStateStore.setLoadComponents({
-    page: page,
-    search_query: search_query.value,
-  })
-}
-
-//
-onMounted(async () => {
-  fetchComponents(1)
-})
 </script>
 
 <template>
@@ -125,124 +47,14 @@ onMounted(async () => {
       </div>
 
       <div class="p-4">
-        <!-- content start -->
-        <template v-if="!getFetchedComponents.isLoading && getFetchedComponents.isError">
-          <p class="myPrimaryInputError">
-            {{ getFetchedComponents.error }}
-          </p>
-        </template>
-
-        <!--  -->
-
-        <!-- Loading # start -->
-        <template v-if="getFetchedComponents && getFetchedComponents.isLoading">
-          <SmallUniversalSpinner
-            class="h-40"
-            width="w-6"
-            height="h-6"
-            border="border-4"
-          ></SmallUniversalSpinner>
-        </template>
-
-        <!-- Actual data # start -->
-        <template v-if="!getFetchedComponents.isError && !getFetchedComponents.isLoading">
-          <div class="flex gap-2 flex-wrap">
-            <button
-              @click="handlecategorySelected({ name: 'Components', id: null })"
-              class="myPrimaryTag font-medium"
-            >
-              Components
-            </button>
-            <button
-              @click="handlecategorySelected({ name: 'HTML Elements', id: null })"
-              class="myPrimaryTag font-medium"
-            >
-              HTML Elements
-            </button>
-          </div>
-
-          <div class="h-full flex md:flex-row flex-col myPrimaryGap mt-2 p-2 overflow-y-scroll">
-            <section class="md:w-4/6">
-              <template v-if="categorySelected && categorySelected.name === 'Components'">
-                <div
-                  class="overflow-scroll min-h-[25rem] max-h-[25rem] grid myPrimaryGap md:grid-cols-2 grid-cols-2 w-full myPrimaryGap px-2 p-4 border border-myPrimaryLightGrayColor rounded-lg"
-                >
-                  <div
-                    class="overflow-hidden whitespace-pre-line flex-1 h-auto rounded-lg border border-gray-200 lg:py-10 py-8 px-2"
-                    v-for="component in getFetchedComponents &&
-                    getFetchedComponents.fetchedData &&
-                    getFetchedComponents.fetchedData.components &&
-                    Array.isArray(getFetchedComponents.fetchedData.components.data) &&
-                    getFetchedComponents.fetchedData.components.data"
-                    :key="component.id"
-                  >
-                    <div class="relative">
-                      <template v-if="component && component.cover_image">
-                        <img
-                          :src="component.cover_image"
-                          alt="placeholder"
-                          class="max-h-72 cursor-pointer object-contain bg-white mx-auto"
-                          @click="handleDropComponent(component)"
-                        />
-                      </template>
-                    </div>
-                  </div>
-                </div>
-              </template>
-              <template v-if="categorySelected && categorySelected.name === 'HTML Elements'">
-                <div
-                  class="overflow-scroll min-h-[25rem] max-h-[25rem] px-2 p-4 border border-myPrimaryLightGrayColor rounded-lg"
-                >
-                  <div class="flex gap-4 flex-wrap w-full">
-                    <!-- Unique HTML Component # start -->
-                    <div v-for="helperComponent in componentHelpers" :key="helperComponent.title">
-                      <div class="flex justify-left items-center gap-4 text-xs font-medium">
-                        <button
-                          @click="handleAddHelperComponent(helperComponent)"
-                          type="button"
-                          class="mySecondaryButton"
-                        >
-                          <span class="material-symbols-outlined text-sm"> add </span>
-                          <span>
-                            {{ helperComponent.title }}
-                          </span>
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </template>
-            </section>
-            <aside
-              class="md:w-2/6 overflow-scroll min-h-[30rem] max-h-[30rem] w-full border rounded-lg py-4 px-2"
-            >
-              <div class="flex gap-4 flex-wrap w-full">
-                <!-- Unique HTML Component # start -->
-                <div v-for="helperComponent in componentHelpers" :key="helperComponent.title">
-                  <div class="flex justify-left items-center gap-4 text-xs font-medium">
-                    <button
-                      @click="handleAddHelperComponent(helperComponent)"
-                      type="button"
-                      class="mySecondaryButton"
-                    >
-                      <span class="material-symbols-outlined text-sm"> add </span>
-                      <span>
-                        {{ helperComponent.title }}
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </aside>
-          </div>
-        </template>
-        <!-- Actual data # start -->
+        <!-- Only show custom search component if provided -->
+        <div v-if="CustomSearchComponent" class="border border-gray-200 rounded-lg p-4">
+          <component :is="CustomSearchComponent" />
+        </div>
+        <div v-else><NoneCustomSearchComponent /></div>
       </div>
     </div>
-    <div
-      v-if="!getFetchedComponents.isError"
-      class="bg-slate-50 px-2 py-4 flex sm:justify-end justify-center"
-    >
+    <div class="bg-slate-50 px-2 py-4 flex sm:justify-end justify-center">
       <div class="sm:w-3/6 w-full px-2 my-2 flex gap-2 justify-end">
         <button
           v-if="firstButtonText"

package/src/Components/TipTap/TipTap.vue

@@ -1,17 +1,18 @@
 <script setup>
-import PageBuilder from '@/composables/PageBuilder.ts'
-import { usePageBuilderStateStore } from '@/stores/page-builder-state'
-import { useMediaLibraryStore } from '@/stores/media-library'
+import { 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)
 </script>
 
 <template>
   <div>
     <div class="blockease-linear duration-200 block ease-linear">
-      <template v-if="pageBuilder.selectedElementIsValidText()">
+      <template v-if="pageBuilderClass.selectedElementIsValidText()">
         <div
           class="border-t border-myPrimaryLightGrayColor flex flex-row justify-between items-center pl-3 pr-3 py-5 duration-200 hover:bg-myPrimaryLightGrayColor"
         >