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

package/src/Components/MediaLibrary/Unsplash.vue

@@ -1,48 +1,46 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
-import { useUnsplashStore } from '@/stores/unsplash';
-import { useMediaLibraryStore } from '@/stores/media-library';
-const mediaLibraryStore = useMediaLibraryStore();
-const unsplashStore = useUnsplashStore();
-const searchQuery = ref('');
-const currentPage = ref(1);
-const orientation = ref(null);
+import { ref, computed, onMounted, inject } from 'vue'
+import { useUnsplashStore } from '@/stores/unsplash'
+
+// Get stores from parent PageBuilder component
+const mediaLibraryStore = inject('mediaLibraryStore')
+const unsplashStore = useUnsplashStore()
+const searchQuery = ref('')
+const currentPage = ref(1)
+const orientation = ref(null)
 
 const getSearchTerm = computed(() => {
-  return unsplashStore.getSearchTerm;
-});
+  return unsplashStore.getSearchTerm
+})
 // unspalsh images
 const getUnsplashImages = computed(() => {
-  return unsplashStore.getUnsplashImages;
-});
+  return unsplashStore.getUnsplashImages
+})
 
 const handleImageClick = function (file) {
-  mediaLibraryStore.setCurrentImage({ file });
-  mediaLibraryStore.setCurrentPreviewImage(null);
-};
+  mediaLibraryStore.setCurrentImage({ src: file })
+  mediaLibraryStore.setCurrentPreviewImage(null)
+}
 
 // search by orientation
 const searchByOrientation = function (orientationParameter) {
   // check if search term length is more than 0
-  if (
-    getSearchTerm.value.length > 0 &&
-    orientation.value !== orientationParameter
-  ) {
-    orientation.value = orientationParameter;
-    currentPage.value = 1;
-    searchUnsplash();
+  if (getSearchTerm.value.length > 0 && orientation.value !== orientationParameter) {
+    orientation.value = orientationParameter
+    currentPage.value = 1
+    searchUnsplash()
   }
-};
+}
 //
 // load images for previous page
 const previousPage = function () {
-  searchUnsplash();
-};
+  searchUnsplash()
+}
 
 // load images for next page
 const nextPage = function () {
-  searchUnsplash();
-};
+  searchUnsplash()
+}
 //
 //
 // search images
@@ -53,37 +51,34 @@ const searchUnsplash = function () {
     Array.isArray(getUnsplashImages.value.fetchedMedia.results) &&
     getUnsplashImages.value.fetchedMedia.results.length === 0
   ) {
-    currentPage.value = 1;
+    currentPage.value = 1
   }
 
   // set values in store
 
-  localStorage.setItem('unsplash-query', searchQuery.value);
+  localStorage.setItem('unsplash-query', searchQuery.value)
 
-  unsplashStore.setSearchTerm(searchQuery.value);
-  unsplashStore.setCurrentPageNumber(currentPage.value);
-  unsplashStore.setOrientationValue(orientation.value);
+  unsplashStore.setSearchTerm(searchQuery.value)
+  unsplashStore.setCurrentPageNumber(currentPage.value)
+  unsplashStore.setOrientationValue(orientation.value)
   unsplashStore.setLoadUnsplashImages({
     searchTerm: getSearchTerm.value,
     currentPage: currentPage.value,
     orientation: orientation.value,
-  });
-};
+  })
+}
 
 // on mounted
 onMounted(() => {
-  if (
-    localStorage.getItem('unsplash-query') &&
-    localStorage.getItem('unsplash-query').length > 0
-  ) {
-    unsplashStore.setSearchTerm(localStorage.getItem('unsplash-query'));
-    searchQuery.value = localStorage.getItem('unsplash-query');
-    searchUnsplash();
+  if (localStorage.getItem('unsplash-query') && localStorage.getItem('unsplash-query').length > 0) {
+    unsplashStore.setSearchTerm(localStorage.getItem('unsplash-query'))
+    searchQuery.value = localStorage.getItem('unsplash-query')
+    searchUnsplash()
   } else {
-    searchQuery.value = 'Magazine';
-    searchUnsplash();
+    searchQuery.value = 'Magazine'
+    searchUnsplash()
   }
-});
+})
 </script>
 
 <template>
@@ -97,9 +92,7 @@ onMounted(() => {
 
       <div class="mysearchBarWithOptions">
         <div class="relative w-full">
-          <div
-            class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"
-          >
+          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
             <span class="material-symbols-outlined"> search </span>
           </div>
           <input
@@ -112,12 +105,7 @@ onMounted(() => {
           />
         </div>
 
-        <button
-          type="submit"
-          class="myPrimaryButton"
-        >
-          Search
-        </button>
+        <button type="submit" class="myPrimaryButton">Search</button>
       </div>
     </form>
 
@@ -142,9 +130,7 @@ onMounted(() => {
       "
       class="mt-2"
     >
-      <div
-        class="flex lg:justify-between justify-end items-center gap-2 py-2 mb-1"
-      >
+      <div class="flex lg:justify-between justify-end items-center gap-2 py-2 mb-1">
         <div class="lg:flex hidden justify-left items-center gap-2">
           <button
             @click="searchByOrientation('landscape')"
@@ -189,27 +175,18 @@ onMounted(() => {
             stroke="currentColor"
             class="w-4 h-4 cursor-pointer"
           >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M6 18L18 6M6 6l12 12"
-            />
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
           </svg>
         </div>
 
-        <nav
-          class="flex items-center gap-2 justify-start"
-          aria-label="Pagination"
-        >
+        <nav class="flex items-center gap-2 justify-start" aria-label="Pagination">
           <p class="myPrimaryParagraph text-xs italic">
             Total pages {{ getUnsplashImages.fetchedMedia.total_pages }}
           </p>
           <p class="myPrimaryParagraph text-xs italic">
             Images {{ getUnsplashImages.fetchedMedia.total }}
           </p>
-          <div
-            class="flex flex-1 justify-between sm:justify-end items-center gap-2"
-          >
+          <div class="flex flex-1 justify-between sm:justify-end items-center gap-2">
             <span
               v-if="currentPage !== 1"
               class="myPrimaryParagraph text-xs italic pr-2 pl-1 cursor-pointer underline"
@@ -231,13 +208,10 @@ onMounted(() => {
             {{ currentPage }}
           </span>
           <button
-            :disabled="
-              currentPage >= getUnsplashImages.fetchedMedia.total_pages
-            "
+            :disabled="currentPage >= getUnsplashImages.fetchedMedia.total_pages"
             class="myPrimaryButton"
             :class="{
-              'opacity-50':
-                currentPage >= getUnsplashImages.fetchedMedia.total_pages,
+              'opacity-50': currentPage >= getUnsplashImages.fetchedMedia.total_pages,
             }"
             @click="nextPage(currentPage++)"
           >
@@ -261,22 +235,14 @@ onMounted(() => {
               class="group aspect-w-10 aspect-h-7 block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-myPrimaryBrandColor focus-within:ring-offset-2 focus-within:ring-offset-gray-100 cursor-pointer"
               :src="image.urls.thumb"
             />
-            <p class="myPrimaryParagraph text-xs font-normal mt-2">
-              By: {{ image.user.name }}
-            </p>
+            <p class="myPrimaryParagraph text-xs font-normal mt-2">By: {{ image.user.name }}</p>
           </div>
         </div>
 
         <div v-if="getUnsplashImages.fetchedMedia.results.length < 1">
           <p class="myPrimaryParagraph py-4 px-4">
-            <span v-if="currentPage === 1">
-              We did not find any images. Make a new search.
-            </span>
-            <span
-              v-if="currentPage > 1"
-              @click="nextPage(1)"
-              class="myPrimaryLink"
-            >
+            <span v-if="currentPage === 1"> We did not find any images. Make a new search. </span>
+            <span v-if="currentPage > 1" @click="nextPage(1)" class="myPrimaryLink">
               No results on current page. Navigate to First Page.
             </span>
           </p>
@@ -284,13 +250,7 @@ onMounted(() => {
       </div>
     </div>
 
-    <div
-      v-if="
-        getUnsplashImages &&
-        getUnsplashImages.isLoading &&
-        !getUnsplashImages.isError
-      "
-    >
+    <div v-if="getUnsplashImages && getUnsplashImages.isLoading && !getUnsplashImages.isError">
       <div class="flex items-center justify-center mt-4">
         <div
           class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"

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>