@myissue/vue-website-page-builder 3.3.86 → 3.3.88

package/src/tests/TestComponents/DemoUnsplash.vue

@@ -24,6 +24,7 @@ const getUnsplashImages = ref([])
 
 const fetchUnsplash = async function () {
   getIsLoading.value = true
+  await delay(300)
   localStorage.setItem('unsplash-query', getSearchTerm.value)
   localStorage.setItem('unsplash-page', getCurrentPageNumber.value)
 
@@ -120,281 +121,269 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div v-if="getIsLoading || isLoading">
-    <div class="pbx-flex pbx-items-center pbx-justify-center">
-      <div
-        class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
-      >
-        <span
-          class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"
-          >{{ translate('Loading...') }}</span
+  <div>
+    <div v-if="getIsLoading || isLoading" class="pbx-min-h-[98vh] pbx-h-[98vh]">
+      <div class="pbx-flex pbx-items-center pbx-justify-center">
+        <div
+          class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
         >
+          <span
+            class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"
+            >{{ translate('Loading...') }}</span
+          >
+        </div>
       </div>
     </div>
-  </div>
-  <div v-if="!isLoading && !getIsLoading">
-    <form
-      @submit.prevent="
-        () => {
-          getCurrentPageNumber = 1
-          fetchUnsplash()
-        }
-      "
-    >
-      <label
-        for="default-search"
-        class="pbx-mb-2 pbx-text-sm pbx-font-normal pbx-text-gray-900 pbx-sr-only dark:pbx-text-gray-300"
-        >{{ translate('Search') }}</label
+    <div v-if="!isLoading && !getIsLoading">
+      <form
+        @submit.prevent="
+          () => {
+            getCurrentPageNumber = 1
+            fetchUnsplash()
+          }
+        "
       >
-
-      <div class="pbx-mysearchBarWithOptions">
-        <div class="pbx-relative pbx-w-full">
-          <div
-            class="pbx-flex pbx-absolute pbx-inset-y-0 pbx-left-0 pbx-items-center pbx-pl-3 pbx-pointer-events-none"
-          >
-            <span class="material-symbols-outlined"> search </span>
+        <div class="pbx-mysearchBarWithOptions">
+          <div class="pbx-relative pbx-w-full">
+            <div
+              class="pbx-flex pbx-absolute pbx-inset-y-0 pbx-left-0 pbx-items-center pbx-pl-3 pbx-pointer-events-none"
+            >
+              <span class="material-symbols-outlined"> search </span>
+            </div>
+            <input
+              type="search"
+              id="search_query"
+              v-model="getSearchTerm"
+              class="pbx-myPrimarySearchInput pbx-w-full"
+              autocomplete="off"
+              :placeholder="translate('Search...')"
+            />
           </div>
-          <input
-            type="search"
-            id="search_query"
-            v-model="getSearchTerm"
-            class="pbx-myPrimarySearchInput"
-            autocomplete="off"
-            :placeholder="translate('Search...')"
-          />
-        </div>
 
-        <button
-          @click="
-            () => {
-              getCurrentPageNumber = 1
-              fetchUnsplash()
-            }
-          "
-          type="submit"
-          class="pbx-myPrimaryTag pbx-break-keep pbx-mr-4"
-        >
-          {{ translate('Search') }}
-        </button>
-      </div>
-    </form>
-    <div class="pbx-mt-2">
-      <div
-        v-if="getUnsplashImages && getUnsplashImages.results"
-        class="pbx-flex lg:pbx-justify-between pbx-justify-end pbx-items-center pbx-gap-2 pbx-py-2 pbx-px-2 pbx-mb-1 pbx-rounded-full pbx-border-solid pbx-border pbx-border-gray-200 pbx-shadow-sm"
-      >
-        <div class="lg:pbx-flex pbx-hidden pbx-justify-left pbx-items-center pbx-gap-2">
           <button
-            @click="searchByOrientation('landscape')"
-            type="button"
-            class="pbx-myPrimaryTag"
-            :class="{
-              'pbx-bg-myPrimaryBrandColor pbx-text-white': getOrientationValue === 'landscape',
-              '': getOrientationValue !== 'landscape',
-            }"
-          >
-            {{ translate('Landscape') }}
-          </button>
-          <button
-            @click="searchByOrientation('portrait')"
-            type="button"
-            class="pbx-myPrimaryTag"
-            :class="{
-              'pbx-bg-myPrimaryBrandColor pbx-text-white': getOrientationValue === 'portrait',
-              '': getOrientationValue !== 'portrait',
-            }"
-          >
-            {{ translate('Portrait') }}
-          </button>
-          <button
-            @click="searchByOrientation('squarish')"
-            type="button"
-            class="pbx-myPrimaryTag"
-            :class="{
-              'pbx-bg-myPrimaryBrandColor pbx-text-white': getOrientationValue === 'squarish',
-              '': getOrientationValue !== 'squarish',
-            }"
+            @click="
+              () => {
+                getCurrentPageNumber = 1
+                fetchUnsplash()
+              }
+            "
+            type="submit"
+            class="pbx-myPrimaryTag pbx-break-keep pbx-mr-4"
           >
-            {{ translate('Squarish') }}
+            {{ translate('Search') }}
           </button>
-
-          <svg
-            @click="searchByOrientation(null)"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="2"
-            stroke="currentColor"
-            class="pbx-w-4 pbx-h-4 pbx-cursor-pointer"
-          >
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-          </svg>
         </div>
+      </form>
+      <div class="pbx-mt-2">
+        <div
+          v-if="getUnsplashImages && getUnsplashImages.results"
+          class="pbx-flex lg:pbx-justify-between pbx-justify-end pbx-items-center pbx-gap-2 pbx-py-2 pbx-px-2 pbx-mb-1 pbx-rounded-full pbx-border-solid pbx-border pbx-border-gray-200 pbx-shadow-sm"
+        >
+          <div class="lg:pbx-flex pbx-hidden pbx-justify-left pbx-items-center pbx-gap-2">
+            <button
+              @click="searchByOrientation('landscape')"
+              type="button"
+              class="pbx-myPrimaryTag"
+              :class="{
+                'pbx-bg-myPrimaryBrandColor pbx-text-white': getOrientationValue === 'landscape',
+                '': getOrientationValue !== 'landscape',
+              }"
+            >
+              {{ translate('Landscape') }}
+            </button>
+            <button
+              @click="searchByOrientation('portrait')"
+              type="button"
+              class="pbx-myPrimaryTag"
+              :class="{
+                'pbx-bg-myPrimaryBrandColor pbx-text-white': getOrientationValue === 'portrait',
+                '': getOrientationValue !== 'portrait',
+              }"
+            >
+              {{ translate('Portrait') }}
+            </button>
+            <button
+              @click="searchByOrientation('squarish')"
+              type="button"
+              class="pbx-myPrimaryTag"
+              :class="{
+                'pbx-bg-myPrimaryBrandColor pbx-text-white': getOrientationValue === 'squarish',
+                '': getOrientationValue !== 'squarish',
+              }"
+            >
+              {{ translate('Squarish') }}
+            </button>
 
-        <nav class="pbx-flex pbx-items-center pbx-gap-2 pbx-justify-start" aria-label="Pagination">
-          <p class="pbx-myPrimaryParagraph pbx-text-xs pbx-italic">
-            {{ translate('Total pages') }} {{ getUnsplashImages.total_pages }}
-          </p>
-          <p class="pbx-myPrimaryParagraph pbx-text-xs pbx-italic">
-            {{ translate('Images') }} {{ getUnsplashImages.total }}
-          </p>
-          <div
-            class="pbx-flex pbx-flex-1 pbx-justify-between sm:pbx-justify-end pbx-items-center pbx-gap-2"
-          >
-            <span
-              v-if="Number(getCurrentPageNumber) !== 1"
-              class="pbx-myPrimaryParagraph pbx-text-xs pbx-italic pbx-pr-2 pbx-pl-1 pbx-cursor-pointer pbx-underline"
-              @click="nextPage(Number((getCurrentPageNumber = 1)))"
+            <svg
+              @click="searchByOrientation(null)"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke="currentColor"
+              class="pbx-w-4 pbx-h-4 pbx-cursor-pointer"
             >
-              {{ translate('First page') }}
-            </span>
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
           </div>
-          <button
-            v-if="Number(getCurrentPageNumber) > 1"
-            :disabled="Number(getCurrentPageNumber) < 1"
-            class="pbx-myPrimaryTag"
-            @click="previousPage(Number(getCurrentPageNumber--))"
-          >
-            {{
-              `${translate('Prev')} ${Number(getCurrentPageNumber) > 0 ? Number(getCurrentPageNumber) - 1 : Number(getCurrentPageNumber) - 1}`
-            }}
-          </button>
 
-          <span class="pbx-myPrimaryTag pbx-py-2.5 pbx-px-4">
-            {{ Number(getCurrentPageNumber) }}
-          </span>
-          <button
-            :disabled="Number(getCurrentPageNumber) >= getUnsplashImages.total_pages"
-            class="pbx-myPrimaryTag"
-            :class="{
-              'pbx-opacity-50': Number(getCurrentPageNumber) >= getUnsplashImages.total_pages,
-            }"
-            @click="nextPage(Number(getCurrentPageNumber++))"
+          <nav
+            class="pbx-flex pbx-items-center pbx-gap-2 pbx-justify-start"
+            aria-label="Pagination"
           >
-            {{
-              `${translate('Next')} ${Number(getCurrentPageNumber) > 0 ? Number(getCurrentPageNumber) + 1 : Number(getCurrentPageNumber) + 1}`
-            }}
-          </button>
-        </nav>
-      </div>
-
-      <div class="pbx-min-h-[33rem] pbx-max-h-[33rem] pbx-flex pbx-gap-6">
-        <div class="pbx-w-9/12 pbx-pr-1 pbx-rounded-lg pbx-overflow-y-auto">
-          <div v-if="getUnsplashImages && getUnsplashImages.results">
+            <p class="pbx-myPrimaryParagraph pbx-text-xs pbx-italic">
+              {{ translate('Total pages') }} {{ getUnsplashImages.total_pages }}
+            </p>
+            <p class="pbx-myPrimaryParagraph pbx-text-xs pbx-italic">
+              {{ translate('Images') }} {{ getUnsplashImages.total }}
+            </p>
             <div
-              v-if="!getIsLoading"
-              class="pbx-grid md:pbx-grid-cols-4 sm:pbx-grid-cols-4 pbx-grid-cols-2 pbx-gap-2"
+              class="pbx-flex pbx-flex-1 pbx-justify-between sm:pbx-justify-end pbx-items-center pbx-gap-2"
             >
-              <div
-                v-for="image in getUnsplashImages.results"
-                :key="image.id"
-                @click="handleImageClick({ url: image.urls.regular, user: image.user.name })"
-                class="pbx-border-solid pbx-border pbx-border-gray-200 pbx-my-2 pbx-px-2 pbx-p-2 pbx-cursor-pointer"
+              <span
+                v-if="Number(getCurrentPageNumber) !== 1"
+                class="pbx-myPrimaryParagraph pbx-text-xs pbx-italic pbx-pr-2 pbx-pl-1 pbx-cursor-pointer pbx-underline"
+                @click="nextPage(Number((getCurrentPageNumber = 1)))"
               >
-                <img
-                  :alt="image.user.name"
-                  class="pbx-group pbx-block pbx-w-full pbx-overflow-hidden pbx-cursor-pointer"
-                  :src="image.urls.thumb"
-                />
-                <p class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-mt-2">
-                  {{ translate('By:') }} {{ image.user.name }}
-                </p>
-              </div>
+                {{ translate('First page') }}
+              </span>
             </div>
-          </div>
+            <button
+              v-if="Number(getCurrentPageNumber) > 1"
+              :disabled="Number(getCurrentPageNumber) < 1"
+              class="pbx-myPrimaryTag"
+              @click="previousPage(Number(getCurrentPageNumber--))"
+            >
+              {{
+                `${translate('Prev')} ${Number(getCurrentPageNumber) > 0 ? Number(getCurrentPageNumber) - 1 : Number(getCurrentPageNumber) - 1}`
+              }}
+            </button>
 
-          <div
-            v-if="
-              getUnsplashImages && getUnsplashImages.results && getUnsplashImages.results.length < 1
-            "
-          >
-            <p class="pbx-myPrimaryParagraph pbx-py-4 pbx-px-4">
-              <span v-if="getCurrentPageNumber === 1">
-                {{ translate('We did not find any images. Make a new search.') }}
-              </span>
-              <span v-if="getCurrentPageNumber > 1" @click="nextPage(1)" class="pbx-myPrimaryLink">
-                {{ translate('No results on current page. Navigate to First Page.') }}
-              </span>
-            </p>
-          </div>
+            <span class="pbx-myPrimaryTag pbx-py-2.5 pbx-px-4">
+              {{ Number(getCurrentPageNumber) }}
+            </span>
+            <button
+              :disabled="Number(getCurrentPageNumber) >= getUnsplashImages.total_pages"
+              class="pbx-myPrimaryTag"
+              :class="{
+                'pbx-opacity-50': Number(getCurrentPageNumber) >= getUnsplashImages.total_pages,
+              }"
+              @click="nextPage(Number(getCurrentPageNumber++))"
+            >
+              {{
+                `${translate('Next')} ${Number(getCurrentPageNumber) > 0 ? Number(getCurrentPageNumber) + 1 : Number(getCurrentPageNumber) + 1}`
+              }}
+            </button>
+          </nav>
         </div>
-        <!-- Sidebar # start -->
-        <aside class="pbx-w-3/12 pbx-overflow-y-auto">
-          <template v-if="getIsLoadingImage">
-            <div class="pbx-flex pbx-items-center pbx-justify-center pbx-mt-4">
+
+        <div class="pbx-min-h-full pbx-max-h-full pbx-flex pbx-gap-6">
+          <div class="pbx-w-9/12 pbx-pr-1 pbx-rounded-lg pbx-overflow-y-auto">
+            <div v-if="getUnsplashImages && getUnsplashImages.results">
               <div
-                class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
+                v-if="!getIsLoading"
+                class="pbx-grid lg:pbx-grid-cols-6 md:pbx-grid-cols-4 sm:pbx-grid-cols-4 pbx-grid-cols-3 pbx-gap-2"
               >
-                <span
-                  class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"
-                  >{{ translate('Loading...') }}</span
+                <div
+                  v-for="image in getUnsplashImages.results"
+                  :key="image.id"
+                  @click="handleImageClick({ url: image.urls.regular, user: image.user.name })"
+                  class="pbx-border-solid pbx-border pbx-border-gray-200 pbx-my-2 pbx-px-2 pbx-p-2 pbx-cursor-pointer"
                 >
+                  <img
+                    :alt="image.user.name"
+                    class="pbx-group pbx-block pbx-w-full pbx-overflow-hidden pbx-cursor-pointer"
+                    :src="image.urls.thumb"
+                  />
+                  <p class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-mt-2">
+                    {{ translate('By:') }} {{ image.user.name }}
+                  </p>
+                </div>
               </div>
             </div>
-          </template>
-          <template v-if="getApplyImageToSelection && !getIsLoadingImage">
-            <img
-              class="pbx-mx-auto pbx-block pbx-w-full pbx-object-cover pbx-object-center pbx-cursor-pointer"
-              :src="`${getApplyImageToSelection}`"
-              alt="file"
-            />
-            <div class="md:pbx-px-3 pbx-px-2">
-              <div>
-                <p class="pbx-myPrimaryParagraph pbx-font-normal pbx-text-gray-900 pbx-pt-4">
-                  {{ translate('Information') }}
-                </p>
-                <dl
-                  class="pbx-mt-2 pbx-border-t pbx-border-b pbx-border-gray-200 pbx-divide-y pbx-divide-gray-200"
+
+            <div
+              v-if="
+                getUnsplashImages &&
+                getUnsplashImages.results &&
+                getUnsplashImages.results.length < 1
+              "
+            >
+              <p class="pbx-myPrimaryParagraph pbx-py-4 pbx-px-4">
+                <span v-if="getCurrentPageNumber === 1">
+                  {{ translate('We did not find any images. Make a new search.') }}
+                </span>
+                <span
+                  v-if="getCurrentPageNumber > 1"
+                  @click="nextPage(1)"
+                  class="pbx-myPrimaryLink"
                 >
-                  <div
-                    class="pbx-py-3 pbx-flex pbx-justify-between pbx-text-sm pbx-font-normal pbx-items-center"
+                  {{ translate('No results on current page. Navigate to First Page.') }}
+                </span>
+              </p>
+            </div>
+          </div>
+          <!-- Sidebar # start -->
+          <aside class="pbx-w-3/12 pbx-overflow-y-auto">
+            <template v-if="getIsLoadingImage">
+              <div class="pbx-flex pbx-items-center pbx-justify-center pbx-mt-4">
+                <div
+                  class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
+                >
+                  <span
+                    class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"
+                    >{{ translate('Loading...') }}</span
                   >
-                    <dt class="pbx-text-gray-500">{{ translate('From:') }}</dt>
-                    <dd class="pbx-text-gray-900">Unsplash</dd>
-                  </div>
-                  <div
-                    class="pbx-py-3 pbx-flex pbx-justify-between pbx-text-sm pbx-font-normal pbx-items-center"
+                </div>
+              </div>
+            </template>
+            <template v-if="getApplyImageToSelection && !getIsLoadingImage">
+              <img
+                class="pbx-mx-auto pbx-block pbx-w-full pbx-object-cover pbx-object-center pbx-cursor-pointer"
+                :src="`${getApplyImageToSelection}`"
+                alt="file"
+              />
+              <div class="md:pbx-px-3 pbx-px-2">
+                <div>
+                  <p class="pbx-myPrimaryParagraph pbx-font-normal pbx-text-gray-900 pbx-pt-4">
+                    {{ translate('Information') }}
+                  </p>
+                  <dl
+                    class="pbx-mt-2 pbx-border-t pbx-border-b pbx-border-gray-200 pbx-divide-y pbx-divide-gray-200"
                   >
-                    <dt class="pbx-text-gray-500">{{ translate('By:') }}</dt>
-                    <dd class="pbx-text-gray-900">{{ getCurrentUser }}</dd>
-                  </div>
-                </dl>
+                    <div
+                      class="pbx-py-3 pbx-flex pbx-justify-between pbx-text-sm pbx-font-normal pbx-items-center"
+                    >
+                      <dt class="pbx-text-gray-500">{{ translate('From:') }}</dt>
+                      <dd class="pbx-text-gray-900">Unsplash</dd>
+                    </div>
+                    <div
+                      class="pbx-py-3 pbx-flex pbx-justify-between pbx-text-sm pbx-font-normal pbx-items-center"
+                    >
+                      <dt class="pbx-text-gray-500">{{ translate('By:') }}</dt>
+                      <dd class="pbx-text-gray-900">{{ getCurrentUser }}</dd>
+                    </div>
+                  </dl>
+                </div>
+                <div class="pbx-flex pbx-justify-end pbx-mt-4 pbx-w-full">
+                  <button
+                    v-if="getApplyImageToSelection && typeof getApplyImageToSelection === 'string'"
+                    @click="applySelectedImage(getApplyImageToSelection)"
+                    class="pbx-myPrimaryButton"
+                    type="button"
+                  >
+                    {{ translate(' Select image') }}
+                  </button>
+                </div>
               </div>
-            </div>
-          </template>
-        </aside>
+            </template>
+          </aside>
+        </div>
+        <!-- Sidebar # end -->
       </div>
-      <!-- Sidebar # end -->
-
-      <!-- Actions footer # start -->
-      <div
-        class="pbx-px-4 pbx-py-3 pbx-flex pbx-gap-2 pbx-border-solid pbx-border-t pbx-border-gray-200 pbx-mt-4 pbx-justify-end"
-      >
-        <button
-          @click="
-            () => {
-              closeMediaLibraryModal()
-              localStorage.setItem('unsplash-page', getCurrentPageNumber)
-            }
-          "
-          class="pbx-mySecondaryButton"
-          type="button"
-        >
-          {{ translate('Close') }}
-        </button>
-        <button
-          v-if="getApplyImageToSelection && typeof getApplyImageToSelection === 'string'"
-          @click="applySelectedImage(getApplyImageToSelection)"
-          class="pbx-myPrimaryButton"
-          type="button"
-        >
-          {{ translate(' Select image') }}
-        </button>
+      <div>
+        <button class="pbx-sr-only">Focusable fallback</button>
       </div>
-      <!-- Actions footer # end -->
-    </div>
-    <div>
-      <button class="pbx-sr-only">Focusable fallback</button>
     </div>
   </div>
 </template>