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

package/src/Components/Modals/MediaLibraryModal.vue

@@ -1,44 +1,13 @@
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue';
 import {
   Dialog,
   DialogOverlay,
   DialogTitle,
   TransitionChild,
   TransitionRoot,
-} from '@headlessui/vue';
-import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
-
-// new version
-import DynamicModal from '@/Components/Modals/DynamicModal.vue';
-import SidebarUnsplash from '@/Components/MediaLibrary/SidebarUnsplash.vue';
-import Unsplash from '@/Components/MediaLibrary/Unsplash.vue';
-import SmallUniversalSpinner from '@/Components/Loaders/SmallUniversalSpinner.vue';
-
-import { useMediaLibraryStore } from '@/stores/media-library';
-
-const mediaLibraryStore = useMediaLibraryStore();
-
-const getCurrentImage = computed(() => {
-  return mediaLibraryStore.getCurrentImage;
-});
-
-const selected = ref('Unsplash');
-
-const tabs = ref([
-  {
-    name: 'Upload',
-    current: false,
-  },
-  {
-    name: 'Media library',
-    current: false,
-  },
-  {
-    name: 'Unsplash',
-    current: true,
-  },
-]);
+} from '@headlessui/vue'
+import { provide } from 'vue'
+import NoneCustomMediaLibraryComponent from '@/Components/PageBuilder/NoneCustomMediaLibraryComponent.vue'
 
 const props = defineProps({
   title: {
@@ -60,46 +29,44 @@ const props = defineProps({
   open: {
     required: true,
   },
-});
+  customMediaComponent: {
+    type: Object,
+    default: null,
+  },
+})
 
 const emit = defineEmits([
   'firstMediaButtonFunction',
   'secondMediaButtonFunction',
   'thirdMediaButtonFunction',
-]);
+])
 
 // first button function
 const firstButton = function () {
-  emit('firstMediaButtonFunction');
-};
+  emit('firstMediaButtonFunction')
+}
 
 // second button  function
 const secondButton = function () {
-  emit('secondMediaButtonFunction');
-};
+  emit('secondMediaButtonFunction')
+}
 
 // third button function
 const thirdButton = function () {
-  emit('thirdMediaButtonFunction');
-};
-//
-//
-const changeSelectedMenuTab = function (clicked) {
-  selected.value = clicked;
-};
+  emit('thirdMediaButtonFunction')
+}
+
+// Provide close function for custom components
+const closeMediaLibraryModal = () => {
+  firstButton() // This triggers the close by emitting to parent
+}
+provide('closeMediaLibraryModal', closeMediaLibraryModal)
 </script>
 
 <template>
   <teleport to="body">
-    <TransitionRoot
-      :show="open"
-      as="template"
-    >
-      <Dialog
-        as="div"
-        class="fixed z-30 inset-0 overflow-y-auto sm:px-4"
-        @close="firstButton"
-      >
+    <TransitionRoot :show="open" as="template">
+      <Dialog as="div" class="fixed z-30 inset-0 overflow-y-auto sm:px-4" @close="firstButton">
         <div class="flex items-end justify-center text-center sm:block sm:p-0">
           <TransitionChild
             as="template"
@@ -110,15 +77,11 @@ const changeSelectedMenuTab = function (clicked) {
             leave-from="opacity-100"
             leave-to="opacity-0"
           >
-            <DialogOverlay
-              class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
-            />
+            <DialogOverlay class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
           </TransitionChild>
 
           <!-- This element is to trick the browser into centering the modal contents. -->
-          <span
-            aria-hidden="true"
-            class="hidden sm:inline-block sm:align-middle sm:h-screen"
+          <span aria-hidden="true" class="hidden sm:inline-block sm:align-middle sm:h-screen"
             >&#8203;</span
           >
           <TransitionChild
@@ -136,10 +99,7 @@ const changeSelectedMenuTab = function (clicked) {
               <div
                 class="flex gap-2 justify-between items-center border-b border-gray-200 p-4 mb-2"
               >
-                <DialogTitle
-                  as="h3"
-                  class="tertiaryHeader my-0 py-0"
-                >
+                <DialogTitle as="h3" class="tertiaryHeader my-0 py-0">
                   {{ title }}
                 </DialogTitle>
 
@@ -155,260 +115,38 @@ const changeSelectedMenuTab = function (clicked) {
                 </div>
               </div>
 
-              <div class="flex items-center">
-                <div class="flex-1">
-                  <!--content media library - start-->
-                  <div
-                    class="p-4 h-full flex md:flex-row flex-col myPrimaryGap mt-2 overflow-y-scroll"
-                  >
-                    <!-- Main content - start-->
-
-                    <div class="pb-4 max-w-7xl mx-auto w-full">
-                      <!-- Tabs -->
-                      <div class="mb-4">
-                        <!-- Tabs Mobile -->
-                        <div class="sm:hidden">
-                          <label
-                            for="tabs"
-                            class="sr-only"
-                            >Select a tab</label
-                          >
-                          <!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
-
-                          <select
-                            v-model="selected"
-                            id="tabs"
-                            class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-myPrimaryLinkColor focus:border-myPrimaryLinkColor sm:text-sm rounded-md"
-                          >
-                            <option>Upload</option>
-                            <option>Media library</option>
-                            <option>Unsplash</option>
-                          </select>
-                        </div>
-                        <div class="hidden sm:block">
-                          <div
-                            class="flex myPrimaryGap items-center overflow-x-auto bg-myPrimaryLightGrayColor px-2 pt-3 pb-2 rounded-full"
-                          >
-                            <nav
-                              class="flex-1 -mb-px flex space-x-2 xl:space-x-4"
-                              aria-label="Tabs"
-                            >
-                              <button
-                                @click="changeSelectedMenuTab(tab.name)"
-                                v-for="tab in tabs"
-                                :key="tab.name"
-                                :aria-current="tab.current ? 'page' : undefined"
-                                class="py-2 px-3 my-1 text-xs cursor-pointer font-medium"
-                                :class="[
-                                  tab.name === selected
-                                    ? 'myPrimaryButton'
-                                    : 'mySecondaryButton',
-                                  'whitespace-nowrap',
-                                ]"
-                              >
-                                <span
-                                  v-if="tab.name === 'Upload'"
-                                  class="material-symbols-outlined"
-                                >
-                                  cloud_upload
-                                </span>
-                                <span
-                                  v-if="tab.name === 'Media library'"
-                                  class="myMediumIcon material-symbols-outlined"
-                                >
-                                  perm_media
-                                </span>
-                                <span
-                                  v-if="tab.name === 'Unsplash'"
-                                  class="myMediumIcon material-symbols-outlined"
-                                >
-                                  filter_hdr
-                                </span>
-                                <span>
-                                  {{ tab.name }}
-                                </span>
-                              </button>
-                            </nav>
-                          </div>
-                        </div>
-                      </div>
-
-                      <template v-if="selected === 'Upload'">
-                        <!-- image upload - start -->
-                        <div class="w-full">
-                          <div
-                            class="overflow-y-scroll pr-1 border border-gray-200 rounded-lg md:min-h-[25rem] md:max-h-[25em] min-h-[20rem] max-h-[20rem]"
-                          >
-                            <div class="myInputGroup p-4 mt-4">
-                              <div class="col-span-3 mb-4">
-                                <div
-                                  class="relativeflex flex-col items-center justify-center"
-                                >
-                                  <label
-                                    class="myPrimaryInputLabel myPrimaryParagraph text-center w-full inset-0 block text-base cursor-pointer"
-                                    for="images"
-                                  >
-                                    <header>
-                                      <div
-                                        class="p-2 rounded-full border-2 border-dashed border-myPrimaryLinkColor hover:border-2 hover:border-opacity-50 hover:border-dashed hover:border-myPrimaryLinkColor"
-                                      >
-                                        <div
-                                          class="myPrimaryParagraph rounded-full bg-myPrimaryLightGrayColor text-center w-full inset-0 text-base pt-6 pb-6 px-2 flex items-center justify-center p-2"
-                                        >
-                                          <div
-                                            class="myPrimaryButton hover:shadow gap-3"
-                                          >
-                                            <span
-                                              class="material-symbols-outlined"
-                                            >
-                                              cloud_upload </span
-                                            ><span> PNG, JPG, up to 2MB </span>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </header></label
-                                  ><input
-                                    id="images"
-                                    type="file"
-                                    multiple=""
-                                    class="sr-only"
-                                  />
-                                </div>
-                              </div>
-                              <div
-                                class="min-h-[1.5rem] flex items-center justify-start"
-                              >
-                                <p
-                                  class="myPrimaryInputError mt-2 mb-0 py-0 self-start"
-                                ></p>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                        <!-- image upload - end -->
-                      </template>
-                      <template v-if="selected === 'Media library'">
-                        <!-- image gallary - start -->
-                        <div class="w-full">
-                          <div
-                            class="overflow-y-scroll pr-1 border border-gray-200 rounded-lg md:min-h-[25rem] md:max-h-[25em] min-h-[20rem] max-h-[20rem]"
-                          >
-                            <div class="myInputGroup p-4 mt-4">
-                              <div class="col-span-3 mb-4">
-                                <p class="myPrimaryParagraph my-0 py-0">
-                                  Media Library
-                                </p>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                        <!-- image gallary - end -->
-                      </template>
-                      <template v-if="selected === 'Unsplash'">
-                        <!-- image gallary - start -->
-                        <div
-                          class="w-full border border-gray-200 rounded-lg py-4 px-2"
-                        >
-                          <Unsplash></Unsplash>
-                        </div>
-                        <!-- image gallary - end -->
-                      </template>
-                    </div>
-
-                    <!-- Main content - end-->
-
-                    <!-- Details sidebar - upload start-->
-                    <aside
-                      v-if="selected === 'Upload'"
-                      aria-label="sidebar"
-                      class="md:w-72"
-                    >
-                      <div
-                        class="pt-4 px-2 rounded-lg md:w-72 md:min-h-[42.5rem] md:max-h-[42.5rem] min-h-[15rem] max-h-[15rem] overflow-y-scroll bg-white border border-gray-200"
-                      >
-                        No image has been selected.
-                      </div>
-                    </aside>
-                    <!-- Details sidebar - media library start-->
-                    <aside
-                      v-if="selected === 'Media library'"
-                      aria-label="sidebar"
-                      class="md:w-72"
-                    >
-                      <div
-                        class="pt-4 px-2 rounded-lg md:w-72 md:min-h-[42.5rem] md:max-h-[42.5rem] min-h-[15rem] max-h-[15rem] overflow-y-scroll bg-white border border-gray-200"
-                      >
-                        No image has been selected.
-                      </div>
-                    </aside>
-                    <!-- Details sidebar - media library end-->
-                    <!-- Details sidebar - unsplash start-->
-                    <aside
-                      v-if="selected === 'Unsplash'"
-                      aria-label="sidebar"
-                      class="md:w-72"
-                    >
-                      <div
-                        class="pt-4 px-2 rounded-lg md:w-72 md:min-h-[42.5rem] md:max-h-[42.5rem] min-h-[15rem] max-h-[15rem] overflow-y-scroll bg-white border border-gray-200"
-                      >
-                        <SidebarUnsplash></SidebarUnsplash>
-                      </div>
-                    </aside>
-                    <!-- Details sidebar - unsplash end-->
-
-                    <!-- Details sidebar end-->
-                  </div>
-                  <!--content media library - end-->
-
-                  <!-- Actions # start -->
-                  <template v-if="selected === 'Unsplash'">
-                    <div
-                      v-if="getCurrentImage && getCurrentImage.file"
-                      class="bg-slate-50 px-2 py-4 flex sm:justify-end justify-center"
-                    >
-                      <div
-                        class="sm:grid-cols-3 sm:items-end justify-end flex sm:flex-row myPrimaryGap sm:w-5/6 w-full"
-                      >
-                        <div v-if="firstButtonText">
-                          <button
-                            ref="firstButtonRef"
-                            class="mySecondaryButton"
-                            type="button"
-                            @click="firstButton"
-                          >
-                            {{ firstButtonText }}
-                          </button>
-                        </div>
-
-                        <div v-if="secondButtonText">
-                          <button
-                            class="myPrimaryButton"
-                            type="button"
-                            @click="secondButton"
-                          >
-                            {{ secondButtonText }}
-                          </button>
-                        </div>
-
-                        <div
-                          v-if="thirdButtonText"
-                          class="w-full"
-                        >
-                          <button
-                            class="myPrimaryDeleteButton"
-                            type="button"
-                            @click="thirdButton"
-                          >
-                            {{ thirdButtonText }}
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                    <!-- Actions # end -->
-                  </template>
-                  <!-- Actions # end -->
+              <div class="p-4">
+                <!-- Show only custom media component if provided -->
+                <div v-if="customMediaComponent" class="w-full">
+                  <component :is="customMediaComponent" />
+                </div>
+                <div v-else>
+                  <NoneCustomMediaLibraryComponent />
                 </div>
               </div>
+
+              <!-- Actions footer to ensure focusable elements -->
+              <div
+                v-if="firstButtonText || secondButtonText"
+                class="bg-slate-50 px-4 py-3 flex justify-end gap-2"
+              >
+                <button
+                  v-if="firstButtonText"
+                  @click="firstButton"
+                  class="mySecondaryButton focus:ring-2 focus:ring-blue-500"
+                  type="button"
+                >
+                  {{ firstButtonText }}
+                </button>
+                <button
+                  v-if="secondButtonText"
+                  @click="secondButton"
+                  class="myPrimaryButton focus:ring-2 focus:ring-blue-500"
+                  type="button"
+                >
+                  {{ secondButtonText }}
+                </button>
+              </div>
             </div>
           </TransitionChild>
         </div>

package/src/Components/Modals/PageBuilderPreviewModal.vue

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

package/src/Components/PageBuilder/AdvancedPageBuilderSettings.vue

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