@myissue/vue-website-page-builder 3.4.20 → 3.4.21

package/src/tests/TestComponents/DemoUnsplash.vue

@@ -1,389 +0,0 @@
-<script setup>
-import { ref, onMounted } from 'vue'
-const unsplashKey = import.meta.env.VITE_UNSPLASH_KEY
-import { usePageBuilderModal } from '../../composables/usePageBuilderModal'
-import { delay } from '../../composables/delay'
-import { preloadImage } from '../../composables/preloadImage'
-import { getPageBuilder } from '../../composables/builderInstance'
-import { useTranslations } from '../../composables/useTranslations'
-const { translate } = useTranslations()
-
-const pageBuilderService = getPageBuilder()
-
-const { closeMediaLibraryModal } = usePageBuilderModal()
-
-const getIsLoading = ref(false)
-const getIsLoadingImage = ref(false)
-const getSearchTerm = ref('')
-const getCurrentPageNumber = ref(1)
-const getOrientationValue = ref('')
-const getApplyImageToSelection = ref('')
-const getCurrentUser = ref('')
-
-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)
-
-  if (
-    getUnsplashImages.value &&
-    Array.isArray(getUnsplashImages.value.results) &&
-    getUnsplashImages.value.results.length === 0
-  ) {
-    getCurrentPageNumber.value = 1
-  }
-
-  const orientationParam = getOrientationValue.value
-    ? `&orientation=${getOrientationValue.value}`
-    : ''
-
-  try {
-    const response = await fetch(
-      `https://api.unsplash.com/search/photos?page=${getCurrentPageNumber.value}&per_page=24&query=${getSearchTerm.value || 'kinfolk'}${orientationParam}`,
-      {
-        headers: {
-          'Accept-Version': 'v1',
-          Authorization: `Client-ID ${unsplashKey}`,
-        },
-      },
-    )
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`)
-    }
-
-    const images = await response.json()
-    getUnsplashImages.value = images
-    getIsLoading.value = false
-  } catch (error) {
-    console.error('Error fetching Unsplash images:', error)
-  } finally {
-    getIsLoading.value = false
-  }
-}
-
-const handleImageClick = async function (data) {
-  getIsLoadingImage.value = true
-
-  if (data.url) {
-    await preloadImage(data.url)
-  }
-
-  await delay(100)
-  getApplyImageToSelection.value = data.url || ''
-
-  getIsLoadingImage.value = false
-}
-
-const searchByOrientation = function (orientationParameter) {
-  // check if search term length is more than 0
-  if (getOrientationValue.value !== orientationParameter) {
-    getOrientationValue.value = orientationParameter
-    getCurrentPageNumber.value = 1
-    fetchUnsplash()
-  }
-}
-//
-// load images for previous page
-const previousPage = function () {
-  localStorage.setItem('unsplash-page', getCurrentPageNumber.value)
-  fetchUnsplash()
-}
-
-// load images for next page
-const nextPage = async function () {
-  localStorage.setItem('unsplash-page', getCurrentPageNumber.value)
-  fetchUnsplash()
-}
-
-const isLoading = ref(false)
-
-const applySelectedImage = async function (imageURL) {
-  isLoading.value = true
-  await pageBuilderService.applySelectedImage({
-    src: `${imageURL}`,
-  })
-
-  closeMediaLibraryModal()
-  isLoading.value = false
-}
-
-// on mounted
-onMounted(async () => {
-  getSearchTerm.value = localStorage.getItem('unsplash-query') || 'kinfolk'
-  getCurrentPageNumber.value = Number(localStorage.getItem('unsplash-page')) || 1
-
-  await fetchUnsplash()
-})
-</script>
-
-<template>
-  <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 v-if="!isLoading && !getIsLoading">
-      <form
-        @submit.prevent="
-          () => {
-            getCurrentPageNumber = 1
-            fetchUnsplash()
-          }
-        "
-      >
-        <div class="pbx-mysearchBarWithOptions">
-          <div class="pbx-relative pbx-w-full pbx-flex pbx-gap-2">
-            <input
-              type="search"
-              id="search_query"
-              v-model="getSearchTerm"
-              class="pbx-myPrimarySearchInput pbx-w-full pbx-pl-10 pbx-border-0"
-              autocomplete="off"
-              :placeholder="translate('Search...')"
-            />
-            <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>
-          </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 pbx-cursor-pointer"
-              :class="{
-                'pbx-bg-myPrimaryBrandColor pbx-text-white': getOrientationValue === 'landscape',
-                '': getOrientationValue !== 'landscape',
-              }"
-            >
-              {{ translate('Landscape') }}
-            </button>
-            <button
-              @click="searchByOrientation('portrait')"
-              type="button"
-              class="pbx-myPrimaryTag pbx-cursor-pointer"
-              :class="{
-                'pbx-bg-myPrimaryBrandColor pbx-text-white': getOrientationValue === 'portrait',
-                '': getOrientationValue !== 'portrait',
-              }"
-            >
-              {{ translate('Portrait') }}
-            </button>
-            <button
-              @click="searchByOrientation('squarish')"
-              type="button"
-              class="pbx-myPrimaryTag pbx-cursor-pointer"
-              :class="{
-                'pbx-bg-myPrimaryBrandColor pbx-text-white': getOrientationValue === 'squarish',
-                '': getOrientationValue !== 'squarish',
-              }"
-            >
-              {{ translate('Squarish') }}
-            </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>
-
-          <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)))"
-              >
-                {{ translate('First page') }}
-              </span>
-            </div>
-            <button
-              v-if="Number(getCurrentPageNumber) > 1"
-              :disabled="Number(getCurrentPageNumber) < 1"
-              class="pbx-myPrimaryTag pbx-cursor-pointer"
-              @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 pbx-cursor-pointer"
-              :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>
-
-        <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
-                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"
-              >
-                <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>
-
-            <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>
-          </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
-                  >
-                </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
-                      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>
-            </template>
-          </aside>
-        </div>
-        <!-- Sidebar # end -->
-      </div>
-      <div>
-        <button class="pbx-sr-only">Focusable fallback</button>
-      </div>
-    </div>
-  </div>
-</template>

package/src/tests/componentsArray.test.json

@@ -1,62 +0,0 @@
-[
-  {
-    "html_code": "<section data-component-title=\"Header H2\"><div class=\"pbx-relative pbx-py-4\"><div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-break-words pbx-text-6xl lg:pbx-text-8xl pbx-font-medium\"><h2>{{ translate('Demo Content') }}</h2></div></div></div></section>",
-    "id": "ba0e9774-3779-467c-9c9f-5c95dd47fa6d",
-    "title": "Header H2"
-  },
-  {
-    "html_code": "<section data-component-title=\"Text\">\n    <div class=\"pbx-relative pbx-py-4\">\n    <div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\">\n    <div><p>{{ translate('Demo Description') }}</p></div>\n    </div>\n    </div>\n    </section>",
-    "id": "d9fe6bdb-60df-45e4-bed5-1a6f8edf28e5",
-    "title": "Text"
-  },
-  {
-    "html_code": "<section data-component-title=\"Three Vertical Images\">\n<div class=\"md:pbx-pt-12 md:pbx-pb-12 pbx-pt-4 pbx-pb-4 lg:pbx-px-4 pbx-px-2 pbx-bg-black\"><div class=\"pbx-mx-auto pbx-max-w-7xl pbx-m\"><div class=\"pbx-myPrimaryGap pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-3 lg:pbx-grid-cols-3\"> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16]  pbx-rounded-tl-full\" src=\"https://images.unsplash.com/photo-1632765866070-3fadf25d3d5b?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMjh8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDgzMXww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"b2fb2e61-c916-4195-9cd2-c1d25747b4f7\">  </div> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16]  pbx-rounded-full\" src=\"https://images.unsplash.com/photo-1542513217-0b0eedf7005d?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMDR8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDc5MXww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"fdf36a14-f7ef-4025-942f-c87b20b18005\">  </div> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16]  pbx-rounded-br-full\" src=\"https://images.unsplash.com/photo-1574015974293-817f0ebebb74?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwyNnx8bW9kZWx8ZW58MHx8fHwxNzQ5ODMwNzM1fDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"618a74a7-5d41-4dce-937c-130dd7490569\"></div></div> </div></div>\n</section>",
-    "id": "0bb012a0-631a-497f-9b7f-832313b64a2b",
-    "title": "Three Vertical Images"
-  },
-  {
-    "html_code": "<section data-component-title=\"Header H3\"><div class=\"pbx-relative pbx-py-4\"><div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-break-words pbx-mt-6 pbx-font-medium pbx-text-2xl lg:pbx-text-4xl\"><h3>{{ translate('Demo Title') }}</h3></div></div></div></section>",
-    "id": "cd7e27ac-b152-4714-a5f7-5ad660f183bf",
-    "title": "Header H3"
-  },
-  {
-    "html_code": "<section data-component-title=\"Text\">\n    <div class=\"pbx-relative pbx-py-4\">\n    <div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\">\n    <div><p>{{ translate('Demo Description Two') }}</p></div>\n    </div>\n    </div>\n    </section>",
-    "id": "b1e75d09-0e72-4c61-a207-a97277cbbfed",
-    "title": "Text"
-  },
-  {
-    "html_code": "<section data-component-title=\"Two Vertical Images\">\n<div class=\"md:pbx-pt-12 md:pbx-pb-12 pbx-pt-4 pbx-pb-4 lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-mx-auto pbx-max-w-7xl\"><div class=\"pbx-myPrimaryGap pbx-grid pbx-grid-cols-2 sm:pbx-grid-cols-2 lg:pbx-grid-cols-2\"> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16] \" src=\"https://images.unsplash.com/photo-1592966719124-2ca2978ba325?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwzfHxraW5mb2xrfGVufDB8fHx8MTc0OTgzMTAzM3ww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"536340a5-c7e1-479d-a2ae-a85e6dacc2df\">  </div> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16] \" src=\"https://images.unsplash.com/photo-1549298222-1c31e8915347?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwzfHxtYWdhemluZSUyMGZhc2hpb258ZW58MHx8fHwxNzQ5ODMxNTEwfDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"41655496-4742-4cc6-bc3c-abe7c2b241fb\">  </div>   </div> </div> </div>\n</section>",
-    "id": "d3b5a3e4-29a3-4b03-88b6-1f77d319af74",
-    "title": "Two Vertical Images"
-  },
-  {
-    "html_code": "<section data-component-title=\"Header H3\"><div class=\"pbx-relative pbx-py-4\"><div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-break-words pbx-mt-6 pbx-font-medium pbx-text-2xl lg:pbx-text-4xl\"><h3>{{ translate('Demo Title Two') }}</h3></div></div></div></section>",
-    "id": "f164929b-4460-4b17-9933-119b47e8bbef",
-    "title": "Header H3"
-  },
-  {
-    "html_code": "<section data-component-title=\"Text\">\n    <div class=\"pbx-relative pbx-py-4\">\n    <div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\">\n    <div class=\"\"><p>{{ translate('Demo Description Three') }}</p></div>\n    </div>\n    </div>\n    </section>",
-    "id": "fa721207-2444-4892-9de3-5260d576a34b",
-    "title": "Text"
-  },
-  {
-    "html_code": "<section data-component-title=\"YouTube Video\">\n    <div class=\"pbx-py-4\">\n    <div class=\"pbx-mx-auto pbx-max-w-7xl pbx-pt-6 pbx-pb-6\">\n    <div id=\"youtube-video\" class=\"pbx-aspect-video pbx-p-4\">\n\n    <iframe frameborder=\"0\" allowfullscreen=\"\" class=\"pbx-w-full pbx-aspect-video\" src=\"https://www.youtube.com/embed/pJvwV1Fm0vU\" allow=\"accelerometer; autoplay; clipboard-write;\">\n    </iframe>\n    </div>\n    </div>\n    </div>\n    </section>",
-    "id": "33a26684-eb95-43c9-adb4-d7bce0ca60f7",
-    "title": "YouTube Video"
-  },
-  {
-    "html_code": "<section data-component-title=\"Header H3\"><div class=\"pbx-relative pbx-py-4\"><div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-break-words pbx-text-2xl lg:pbx-text-4xl pbx-font-medium\"><h3>{{ translate('Demo Title Three') }}</h3></div></div></div></section>",
-    "id": "de2208e1-5b65-4302-8ffb-b9beb7d192d7",
-    "title": "Header H3"
-  },
-  {
-    "html_code": "<section data-component-title=\"Text\">\n    <div class=\"pbx-relative pbx-py-4\">\n    <div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\">\n    <div><p>{{ translate('Demo Description Four') }}</p><p></p></div>\n    </div>\n    </div>\n    </section>",
-    "id": "e9a5c794-5972-473d-8181-af4345cbaabe",
-    "title": "Text"
-  },
-  {
-    "html_code": "<sectio data-component-title=\"Six Square Images Grid\">\n<div class=\"md:pbx-pt-12 md:pbx-pb-12 pbx-pt-4 pbx-pb-4 lg:pbx-px-4 pbx-px-2 pbx-rounded-tr-full pbx-bg-yellow-100 pbx-rounded-bl-full\">\n<div class=\"pbx-mx-auto pbx-max-w-7xl\">\n<div class=\"pbx-grid pbx-grid-cols-2 md:pbx-grid-cols-3 pbx-myPrimaryGap\">\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square \" src=\"https://images.unsplash.com/photo-1616837874254-8d5aaa63e273?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxOXx8amV3ZXJseXxlbnwwfHx8fDE3NTEwMjE1MDR8MA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square \" src=\"https://images.unsplash.com/photo-1608042314453-ae338d80c427?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwyfHxqZXdlcmx5fGVufDB8fHx8MTc1MTAyMTUwNHww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square \" src=\"https://images.unsplash.com/photo-1621939745912-aad97fd3a34d?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHw1MXx8amV3ZXJseXxlbnwwfHx8fDE3NTEwMjE1NDN8MA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-aspect-square  pbx-object-bottom\" src=\"https://images.unsplash.com/photo-1617038220319-276d3cfab638?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHw1fHxqZXdlcmx5fGVufDB8fHx8MTc1MTAyMTUwNHww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-aspect-square  pbx-object-bottom\" src=\"https://images.unsplash.com/photo-1594924571793-f6517415f594?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHw0Nnx8amV3ZXJseXxlbnwwfHx8fDE3NTEwMjE1Mjd8MA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-aspect-square  pbx-object-top\" src=\"https://images.unsplash.com/photo-1683099869102-bcf8791eb0e5?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMjV8fGpld2VybHl8ZW58MHx8fHwxNzUxMDIxNTc4fDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"image\">\n</div>\n\n</div>\n</div>\n</div>\n</sectio>",
-    "id": "7bcda060-8ed5-482f-bcf4-aa6bd7fdb193",
-    "title": "Six Square Images Grid"
-  }
-]

package/src/tests/pageBuilderService.test.ts

@@ -1,165 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect, vi, beforeEach, beforeAll } from 'vitest'
-import { PageBuilderService } from '../services/PageBuilderService'
-import { usePageBuilderStateStore } from '../stores/page-builder-state'
-import componentsArray from './componentsArray.test.json'
-
-// Mock store (replace with your actual store or a better mock if needed)
-const mockStore = {
-  // Mock getters
-  getApplyImageToSelection: { src: '' },
-  getLocalStorageItemName: 'test-key',
-  getHyberlinkEnable: false,
-  getComponents: [],
-  getComponent: null,
-  getElement: null,
-  getComponentArrayAddMethod: null,
-  getShowModalTipTap: false,
-  getMenuRight: false,
-  getBorderStyle: null,
-  getBorderWidth: null,
-  getBorderColor: null,
-  getBorderRadiusGlobal: null,
-  getBorderRadiusTopLeft: null,
-  getBorderRadiusTopRight: null,
-  getBorderRadiusBottomleft: null,
-  getBorderRadiusBottomRight: null,
-  getElementContainsHyperlink: null,
-  getHyperlinkAbility: null,
-  getHyperlinkInput: null,
-  getHyperlinkMessage: null,
-  getHyperlinkError: null,
-  getOpenHyperlinkInNewTab: null,
-  getOpacity: null,
-  getBackgroundOpacity: null,
-  getTextAreaVueModel: null,
-  getCurrentClasses: [],
-  getCurrentStyles: {},
-  getFontVerticalPadding: null,
-  getFontHorizontalPadding: null,
-  getFontVerticalMargin: null,
-  getFontHorizontalMargin: null,
-  getFontStyle: null,
-  getFontFamily: null,
-  getFontWeight: null,
-  getFontBase: null,
-  getFontDesktop: null,
-  getFontTablet: null,
-  getFontMobile: null,
-  getBackgroundColor: null,
-  getTextColor: null,
-  getBasePrimaryImage: null,
-  getPageBuilderConfig: null,
-  getCurrentPreviewImage: null,
-  getBuilderStarted: false,
-  getIsLoadingGlobal: false,
-  getIsSaving: false,
-  getHasLocalDraftForUpdate: false,
-  getIsLoadingResumeEditing: false,
-  getIsRestoring: false,
-  getCurrentLanguage: null,
-  getHistoryIndex: 0,
-  getHistoryLength: 0,
-
-  // Mock actions
-  setBuilderStarted: vi.fn(),
-  setPageBuilderConfig: vi.fn(),
-  setHistoryIndex: vi.fn(),
-  setHistoryLength: vi.fn(),
-  setLocalStorageItemName: vi.fn(),
-  setShowModalTipTap: vi.fn(),
-  setMenuRight: vi.fn(),
-  setBorderStyle: vi.fn(),
-  setBorderWidth: vi.fn(),
-  setBorderColor: vi.fn(),
-  setBorderRadiusGlobal: vi.fn(),
-  setBorderRadiusTopLeft: vi.fn(),
-  setBorderRadiusTopRight: vi.fn(),
-  setBorderRadiusBottomleft: vi.fn(),
-  setBorderRadiusBottomRight: vi.fn(),
-  setElementContainsHyperlink: vi.fn(),
-  setHyperlinkAbility: vi.fn(),
-  setHyperlinkInput: vi.fn(),
-  setHyperlinkMessage: vi.fn(),
-  setHyperlinkError: vi.fn(),
-  setHyberlinkEnable: vi.fn(),
-  setOpenHyperlinkInNewTab: vi.fn(),
-  setOpacity: vi.fn(),
-  setBackgroundOpacity: vi.fn(),
-  setTextAreaVueModel: vi.fn(),
-  setClass: vi.fn(),
-  removeClass: vi.fn(),
-  setCurrentClasses: vi.fn(),
-  setCurrentStyles: vi.fn(),
-  setFontVerticalPadding: vi.fn(),
-  setFontHorizontalPadding: vi.fn(),
-  setFontVerticalMargin: vi.fn(),
-  setFontHorizontalMargin: vi.fn(),
-  setFontStyle: vi.fn(),
-  setFontFamily: vi.fn(),
-  setFontWeight: vi.fn(),
-  setFontBase: vi.fn(),
-  setFontDesktop: vi.fn(),
-  setFontTablet: vi.fn(),
-  setFontMobile: vi.fn(),
-  setBackgroundColor: vi.fn(),
-  setTextColor: vi.fn(),
-  setElement: vi.fn(),
-  setComponent: vi.fn(),
-  setComponents: vi.fn(),
-  setPushComponents: vi.fn(),
-  setBasePrimaryImage: vi.fn(),
-  setCurrentLayoutPreview: vi.fn(),
-  setApplyImageToSelection: vi.fn(),
-  setCurrentPreviewImage: vi.fn(),
-  setIsLoadingGlobal: vi.fn(),
-  setIsSaving: vi.fn(),
-  setHasLocalDraftForUpdate: vi.fn(),
-  setIsLoadingResumeEditing: vi.fn(),
-  setIsRestoring: vi.fn(),
-  setCurrentLanguage: vi.fn(),
-} as unknown as ReturnType<typeof usePageBuilderStateStore>
-
-const configPageBuilder = {
-  updateOrCreate: {
-    formType: 'update',
-    formName: 'collection',
-  },
-  // ...other config options as needed
-} as const
-
-beforeAll(() => {
-  // Create a fake #pagebuilder element in the DOM for the test
-  const div = document.createElement('div')
-  div.id = 'pagebuilder'
-  document.body.appendChild(div)
-})
-
-describe('PageBuilderService', () => {
-  let service: PageBuilderService
-
-  beforeEach(() => {
-    // Reset mocks before each test
-    Object.values(mockStore).forEach(
-      (fn) =>
-        typeof fn === 'function' &&
-        typeof (fn as { mockClear?: () => void }).mockClear === 'function' &&
-        (fn as { mockClear: () => void }).mockClear(),
-    )
-    service = new PageBuilderService(mockStore)
-  })
-
-  it('should start builder and return a success message', async () => {
-    const result = await service.startBuilder(configPageBuilder, componentsArray)
-    expect(result).toHaveProperty('message', 'Page builder started successfully.')
-    expect(mockStore.setBuilderStarted).toHaveBeenCalledWith(true)
-    expect(mockStore.setPageBuilderConfig).toHaveBeenCalledWith(configPageBuilder)
-    // Add more assertions as needed
-  })
-
-  it('should handle missing components array gracefully', async () => {
-    const result = await service.startBuilder(configPageBuilder)
-    expect(result).toHaveProperty('validation.error', true)
-    expect(result).toHaveProperty('validation.reason', 'Components data must be an array.')
-  })
-})

package/src/types/global.d.ts

@@ -1,11 +0,0 @@
-// Global type declarations
-
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<
-    Record<string, unknown>,
-    Record<string, unknown>,
-    Record<string, unknown>
-  >
-  export default component
-}