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

package/src/Components/MediaLibrary/SidebarUnsplash.vue

@@ -1,35 +1,28 @@
 <script setup>
-import { computed } from 'vue';
-import { useMediaLibraryStore } from '@/stores/media-library';
+import { ref, computed, onMounted, inject } from 'vue'
 
-const mediaLibraryStore = useMediaLibraryStore();
+// Get stores from parent PageBuilder component
+const mediaLibraryStore = inject('mediaLibraryStore')
 
 const getCurrentImage = computed(() => {
-  return mediaLibraryStore.getCurrentImage;
-});
+  return mediaLibraryStore.getCurrentImage
+})
 </script>
 
 <template>
   <!-- Loading # end -->
-  <div
-    v-if="getCurrentImage && getCurrentImage.file"
-    class="pb-6 space-y-6"
-  >
+  <div v-if="getCurrentImage && getCurrentImage.src" class="pb-6 space-y-6">
     <img
       class="mx-auto block w-full object-cover object-center cursor-pointer"
-      :src="`${getCurrentImage.file}`"
+      :src="`${getCurrentImage.src}`"
       alt="file"
     />
 
     <div class="md:px-3 px-2">
       <div>
         <h3 class="font-normal text-gray-900">Information</h3>
-        <dl
-          class="mt-2 border-t border-b border-gray-200 divide-y divide-gray-200"
-        >
-          <div
-            class="py-3 flex justify-between text-sm font-normal items-center"
-          >
+        <dl class="mt-2 border-t border-b border-gray-200 divide-y divide-gray-200">
+          <div class="py-3 flex justify-between text-sm font-normal items-center">
             <dt class="text-gray-500">From</dt>
             <dd class="text-gray-900">Unsplash</dd>
           </div>

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]"