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

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

@@ -1,18 +1,18 @@
 <script setup>
 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'
+import ClassEditor from './Editables/ClassEditor.vue'
+import ImageEditor from './Editables/ImageEditor.vue'
+import OpacityEditor from './Editables/OpacityEditor.vue'
+import Typography from './Editables/Typography.vue'
+import PaddingPlusMargin from './Editables/PaddingPlusMargin.vue'
+import DeleteElement from './Editables/DeleteElement.vue'
+import BorderRadius from './Editables/BorderRadius.vue'
+import BackgroundColorEditor from './Editables/BackgroundColorEditor.vue'
+import Borders from './Editables/Borders.vue'
+import LinkEditor from './Editables/LinkEditor.vue'
+import TipTap from '../../TipTap/TipTap.vue'
+import EditGetElement from './Editables/EditGetElement.vue'
+import ElementEditor from './Editables/ElementEditor.vue'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')

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

@@ -145,7 +145,11 @@ const updateCurrentTab = function (tab) {
                   {{ getComponent?.id }}
                 </p>
                 <p class="whitespace-pre-line leading-5 mt-4">
-                  Component HTML:<br />
+                  Component Title:<br />
+                  {{ getComponent?.title }}
+                </p>
+                <p class="whitespace-pre-line leading-5 mt-4">
+                  Component HTML:
                   {{ getComponent?.html_code }}
                 </p>
               </div>
@@ -167,6 +171,10 @@ const updateCurrentTab = function (tab) {
                     {{ component.id }}
                   </p>
 
+                  <p class="whitespace-pre-line leading-5 mt-4">
+                    Component Title:
+                    {{ getComponent?.title }}
+                  </p>
                   <p class="whitespace-pre-line leading-5 mt-4">
                     Component HTML:<br />
                     {{ component.html_code }}

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

@@ -1,8 +1,8 @@
 <script setup>
-import SlideOverRightParent from '@/Components/PageBuilder/Slidebars/SlideOverRightParent.vue'
-import AdvancedPageBuilderSettings from '@/Components/PageBuilder/Settings/AdvancedPageBuilderSettings.vue'
+import SlideOverRightParent from '../Slidebars/SlideOverRightParent.vue'
+import AdvancedPageBuilderSettings from './AdvancedPageBuilderSettings.vue'
 import { ref, computed, inject } from 'vue'
-import fullHTMLContent from '@/utils/builder/html-doc-declaration-with-components'
+import fullHTMLContent from '../../../utils/builder/html-doc-declaration-with-components'
 const version = __APP_VERSION__
 
 // Get stores from parent PageBuilder component
@@ -12,6 +12,10 @@ const showAdvancedSettingsSlideOverRight = ref(false)
 const titleSettingsSlideOverRight = ref('')
 const downloadedComponents = ref(null)
 
+const getConfigPageBuilder = computed(() => {
+  return pageBuilderStateStore.getConfigPageBuilder
+})
+
 // handle slideover window
 const handleAdvancedSettingsSlideOver = function () {
   titleSettingsSlideOverRight.value = 'Advanced Settings'
@@ -64,23 +68,310 @@ const handleDownloadHTML = function () {
       <AdvancedPageBuilderSettings></AdvancedPageBuilderSettings>
     </SlideOverRightParent>
     <!-- Advanced Settings - start -->
-    <div class="mt-4 mb-4 py-8 border-b border-myPrimbryLightGrayColor">
-      <div class="flex items-left flex-col gap-1">
-        <h3 class="myQuaternaryHeader">Advanced Settings</h3>
+    <div
+      class="mt-4 mb-4 py-8 border-b border-myPrimbryLightGrayColor flex gap-4 flex-col divide-y divide-gray-300"
+    >
+      <div class="flex items-left flex-col gap-2">
+        <h3 class="myQuaternaryHeader">Selections Overview</h3>
         <p class="myPrimaryParagraph text-xs">
           Manage advanced settings here. Like an overview of Selected Element, Component, and
           Components in real-time.
         </p>
-        <p class="myPrimaryParagraph text-xs pt-4">Page Builder Version: {{ version }}</p>
+
+        <div class="my-4">
+          <button
+            @click="handleAdvancedSettingsSlideOver"
+            type="button"
+            class="myPrimaryButton text-xs"
+          >
+            Open Overview
+          </button>
+        </div>
       </div>
-      <div class="mt-4">
-        <button
-          @click="handleAdvancedSettingsSlideOver"
-          type="button"
-          class="myPrimaryButton text-xs"
-        >
-          Advanced Settings
-        </button>
+
+      <!-- Advanced Settings - start -->
+      <div class="mt-4 mb-4 py-8 border-b border-myPrimbryLightGrayColor">
+        <div class="flex items-left flex-col gap-1">
+          <h3 class="myQuaternaryHeader">Configuration Overview</h3>
+          <p class="myPrimaryParagraph text-xs">
+            A summary of current user preferences, application settings, and system metadata
+            including UI theme, language, saved components, and logo configuration.
+          </p>
+        </div>
+        <!-- User Settings Table - start -->
+        <div class="mt-4">
+          <h4 class="myQuaternaryHeader text-sm mb-2">User Settings</h4>
+          <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+            <div class="overflow-x-auto">
+              <table class="min-w-full divide-y divide-gray-300">
+                <thead class="bg-gray-50">
+                  <tr>
+                    <th
+                      scope="col"
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >
+                      Setting
+                    </th>
+                    <th
+                      scope="col"
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >
+                      Value
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="bg-white divide-y divide-gray-200">
+                  <tr v-if="getConfigPageBuilder?.userSettings?.theme">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                      Theme
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                      {{ getConfigPageBuilder.userSettings.theme }}
+                    </td>
+                  </tr>
+                  <tr v-if="getConfigPageBuilder?.userSettings?.language">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                      Language
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                      {{ getConfigPageBuilder.userSettings.language }}
+                    </td>
+                  </tr>
+                  <tr v-if="getConfigPageBuilder?.userSettings?.autoSave !== undefined">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                      Auto Save
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                      <span
+                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
+                        :class="
+                          getConfigPageBuilder.userSettings.autoSave
+                            ? 'bg-green-100 text-green-800'
+                            : 'bg-red-100 text-red-800'
+                        "
+                      >
+                        {{ getConfigPageBuilder.userSettings.autoSave ? 'Enabled' : 'Disabled' }}
+                      </span>
+                    </td>
+                  </tr>
+                  <tr v-if="getConfigPageBuilder?.userSettings?.notifications !== undefined">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                      Notifications
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                      <span
+                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
+                        :class="
+                          getConfigPageBuilder.userSettings.notifications
+                            ? 'bg-green-100 text-green-800'
+                            : 'bg-red-100 text-red-800'
+                        "
+                      >
+                        {{
+                          getConfigPageBuilder.userSettings.notifications ? 'Enabled' : 'Disabled'
+                        }}
+                      </span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+        <!-- User Settings Table - end -->
+
+        <!-- Version Information Table - start -->
+        <div class="mt-8">
+          <h4 class="myQuaternaryHeader text-sm mb-2">Version Information</h4>
+          <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+            <div class="overflow-x-auto">
+              <table class="min-w-full divide-y divide-gray-300">
+                <thead class="bg-gray-50">
+                  <tr>
+                    <th
+                      scope="col"
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >
+                      Component
+                    </th>
+                    <th
+                      scope="col"
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >
+                      Version
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="bg-white divide-y divide-gray-200">
+                  <tr>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                      Page Builder
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                      <span
+                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
+                      >
+                        {{ version }}
+                      </span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+        <!-- Version Information Table - end -->
+
+        <!-- User Information Table - start -->
+        <div class="mt-8" v-if="getConfigPageBuilder?.userForPageBuilder">
+          <h4 class="myQuaternaryHeader text-sm mb-2">User Information</h4>
+          <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+            <div class="overflow-x-auto">
+              <table class="min-w-full divide-y divide-gray-300">
+                <thead class="bg-gray-50">
+                  <tr>
+                    <th
+                      scope="col"
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >
+                      Property
+                    </th>
+                    <th
+                      scope="col"
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >
+                      Value
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="bg-white divide-y divide-gray-200">
+                  <tr>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                      User Name
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                      {{ getConfigPageBuilder.userForPageBuilder.name }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+        <!-- User Information Table - end -->
+
+        <!-- Operation Mode Table - start -->
+        <div class="mt-8" v-if="getConfigPageBuilder?.updateOrCreate">
+          <h4 class="myQuaternaryHeader text-sm mb-2">Operation Mode</h4>
+          <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+            <div class="overflow-x-auto">
+              <table class="min-w-full divide-y divide-gray-300">
+                <thead class="bg-gray-50">
+                  <tr>
+                    <th
+                      scope="col"
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >
+                      Mode
+                    </th>
+                    <th
+                      scope="col"
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >
+                      Description
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="bg-white divide-y divide-gray-200">
+                  <tr>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                      Current Operation
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                      <span
+                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
+                        :class="
+                          getConfigPageBuilder.updateOrCreate === 'create'
+                            ? 'bg-green-100 text-green-800'
+                            : 'bg-blue-100 text-blue-800'
+                        "
+                      >
+                        {{
+                          getConfigPageBuilder.updateOrCreate === 'create'
+                            ? 'Creating new Resource'
+                            : 'Updating existing Resource'
+                        }}
+                      </span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+        <!-- Operation Mode Table - end -->
+
+        <!-- Page Builder Logo Table - start -->
+        <div class="mt-8" v-if="getConfigPageBuilder?.pageBuilderLogo">
+          <h4 class="myQuaternaryHeader text-sm mb-2">Logo Configuration</h4>
+          <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+            <div class="overflow-x-auto">
+              <table class="min-w-full divide-y divide-gray-300">
+                <thead class="bg-gray-50">
+                  <tr>
+                    <th
+                      scope="col"
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >
+                      Property
+                    </th>
+                    <th
+                      scope="col"
+                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >
+                      Value
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="bg-white divide-y divide-gray-200">
+                  <tr>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                      Logo
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                      <div class="flex items-center space-x-3">
+                        <div class="border-r border-gray-200 pr-6">
+                          <img
+                            class="h-3"
+                            :src="getConfigPageBuilder.pageBuilderLogo.src"
+                            alt="Logo"
+                          />
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                      Logo URL
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                      <div class="flex items-center space-x-3">
+                        <div class="border-r border-gray-200 pr-6">
+                          <div class="flex items-center space-x-3">
+                            <span class="whitespace-nowrap">{{
+                              getConfigPageBuilder.pageBuilderLogo.src
+                            }}</span>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+        <!-- Page Builder Logo Table - end -->
       </div>
     </div>
     <!-- Advanced Settings - end -->

package/src/Components/Search/SearchComponents.vue

@@ -1,8 +1,8 @@
 <script setup>
-import Modal from '@/Components/Modals/Modal.vue'
-import NoneCustomSearchComponent from '@/Components/PageBuilder/DemoContent/NoneCustomSearchComponent.vue'
+import ModalBuilder from '../Modals/ModalBuilder.vue'
+import NoneCustomSearchComponent from '../PageBuilder/DemoContent/NoneCustomSearchComponent.vue'
 
-const props = defineProps({
+defineProps({
   firstButtonText: {
     required: true,
   },
@@ -22,13 +22,19 @@ const props = defineProps({
 const emit = defineEmits(['firstModalButtonSearchComponentsFunction'])
 
 // first button function
-const firstButton = function () {
+const firstButtonBuilder = function () {
   emit('firstModalButtonSearchComponentsFunction')
 }
 </script>
 
 <template>
-  <Modal maxWidth="5xl" :show="show" @close="firstButton" minHeight="" maxHeight="">
+  <ModalBuilder
+    maxWidth="5xl"
+    :showModalBuilder="show"
+    @closeMainModalBuilder="firstButtonBuilder"
+    minHeight=""
+    maxHeight=""
+  >
     <div
       class="font-sans w-full relative inline-block align-bottom text-left overflow-hidden transform transition-all sm:align-middle"
     >
@@ -40,7 +46,7 @@ const firstButton = function () {
         </div>
         <div
           class="h-10 w-10 flex-start cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white hover:fill-white focus-visible:ring-0"
-          @click="firstButton"
+          @click="firstButtonBuilder"
         >
           <span class="material-symbols-outlined"> close </span>
         </div>
@@ -61,11 +67,11 @@ const firstButton = function () {
           ref="firstButtonRef"
           class="mySecondaryButton"
           type="button"
-          @click="firstButton"
+          @click="firstButtonBuilder"
         >
           {{ firstButtonText }}
         </button>
       </div>
     </div>
-  </Modal>
+  </ModalBuilder>
 </template>

package/src/Components/TipTap/TipTap.vue

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

package/src/Components/TipTap/TipTapInput.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { Editor, useEditor, EditorContent } from '@tiptap/vue-3'
+import { useEditor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import { computed, onBeforeMount, onMounted, ref, watch, inject } from 'vue'
-import PageBuilderClass from '@/composables/PageBuilderClass.ts'
+import PageBuilderClass from '../../composables/PageBuilderClass.ts'
 import Link from '@tiptap/extension-link'
-import DynamicModal from '@/Components/Modals/DynamicModal.vue'
+import DynamicModalBuilder from '../Modals/DynamicModalBuilder.vue'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')
@@ -20,9 +20,9 @@ const firstButtonModal = ref('')
 const secondButtonModal = ref(null)
 const thirdButtonModal = ref(null)
 // set dynamic modal handle functions
-const firstModalButtonFunction = ref(null)
-const secondModalButtonFunction = ref(null)
-const thirdModalButtonFunction = ref(null)
+const firstModalButtonFunctionDynamicModalBuilder = ref(null)
+const secondModalButtonFunctionDynamicModalBuilder = ref(null)
+const thirdModalButtonFunctionDynamicModalBuilder = ref(null)
 
 const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
@@ -79,8 +79,6 @@ watch(textContent, (newValue) => {
   }
 })
 
-// pageBuilderClass.selectedElementIsValidText(newValue);
-
 const TipTapSetContent = function () {
   if (!pageBuilderClass.selectedElementIsValidText()) return
 
@@ -114,19 +112,19 @@ const handleURL = function () {
   thirdButtonModal.value = 'Save'
 
   // handle click
-  firstModalButtonFunction.value = function () {
+  firstModalButtonFunctionDynamicModalBuilder.value = function () {
     showModalUrl.value = false
     urlError.value = null
   }
 
   // handle click
-  secondModalButtonFunction.value = function () {
+  secondModalButtonFunctionDynamicModalBuilder.value = function () {
     editor.value.chain().focus().extendMarkRange('link').unsetLink().run()
     showModalUrl.value = false
   }
 
   // handle click
-  thirdModalButtonFunction.value = function () {
+  thirdModalButtonFunctionDynamicModalBuilder.value = function () {
     const isNotValidated = validateURL()
     if (isNotValidated) {
       return
@@ -179,8 +177,8 @@ onMounted(() => {
 </script>
 <template>
   <div>
-    <DynamicModal
-      :showDynamicModal="showModalUrl"
+    <DynamicModalBuilder
+      :showDynamicModalBuilder="showModalUrl"
       :type="typeModal"
       :gridColumnAmount="gridColumnModal"
       :title="titleModal"
@@ -188,9 +186,9 @@ onMounted(() => {
       :firstButtonText="firstButtonModal"
       :secondButtonText="secondButtonModal"
       :thirdButtonText="thirdButtonModal"
-      @firstModalButtonFunction="firstModalButtonFunction"
-      @secondModalButtonFunction="secondModalButtonFunction"
-      @thirdModalButtonFunction="thirdModalButtonFunction"
+      @firstModalButtonFunctionDynamicModalBuilder="firstModalButtonFunctionDynamicModalBuilder"
+      @secondModalButtonFunctionDynamicModalBuilder="secondModalButtonFunctionDynamicModalBuilder"
+      @thirdModalButtonFunctionDynamicModalBuilder="thirdModalButtonFunctionDynamicModalBuilder"
     >
       <header></header>
       <main>
@@ -204,7 +202,7 @@ onMounted(() => {
           </div>
         </div>
       </main>
-    </DynamicModal>
+    </DynamicModalBuilder>
 
     <div class="blockease-linear duration-200 block ease-linear">
       <div v-if="pageBuilderClass.selectedElementIsValidText() && editor">