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

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>

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>