@myissue/vue-website-page-builder 3.2.16 → 3.2.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "v3.2.16",
+  "version": "v3.2.21",
   "description": "🚧 DEVELOPMENT VERSION - Vue.js page builder component with drag & drop functionality. Not ready for production use.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

package/src/App.vue

@@ -1,6 +1,6 @@
 <script setup>
 import Navbar from './Components/Homepage/Navbar.vue'
-import HomeSection from './Components/Homepage/HomeSection.vue'
+import HomeSection from './DemoComponents/HomeSection.vue'
 import Footer from './Components/Homepage/Footer.vue'
 </script>
 

package/src/Components/{Search/SearchComponents.vue → Modals/BuilderComponents.vue}

@@ -1,6 +1,6 @@
 <script setup>
 import ModalBuilder from '../Modals/ModalBuilder.vue'
-import NoneCustomBuilderComponents from '../PageBuilder/DemoContent/NoneCustomBuilderComponents.vue'
+import DefaultBuilderComponents from '../PageBuilder/DefaultComponents/DefaultBuilderComponents.vue'
 
 defineProps({
   firstButtonText: {
@@ -54,10 +54,10 @@ const firstButtonBuilder = function () {
 
       <div class="p-4">
         <!-- Only show custom search component if provided -->
-        <div v-if="CustomBuilderComponents" class="border border-gray-200 rounded-lg p-4">
+        <div v-if="CustomBuilderComponents">
           <component :is="CustomBuilderComponents" />
         </div>
-        <div v-else><NoneCustomBuilderComponents /></div>
+        <div v-else><DefaultBuilderComponents /></div>
       </div>
     </div>
     <div class="bg-slate-50 px-2 py-4 flex sm:justify-end justify-center">

package/src/Components/Modals/MediaLibraryModal.vue

@@ -7,7 +7,7 @@ import {
   TransitionRoot,
 } from '@headlessui/vue'
 import { provide } from 'vue'
-import NoneCustomMediaLibraryComponent from '../PageBuilder/DemoContent/NoneCustomMediaLibraryComponent.vue'
+import DefaultMediaLibraryComponent from '../PageBuilder/DefaultComponents/DefaultMediaLibraryComponent.vue'
 
 const props = defineProps({
   title: {
@@ -94,7 +94,7 @@ provide('closeMediaLibraryModal', closeMediaLibraryModal)
             leave-to="opacity-0 scale-95"
           >
             <div
-              class="font-sans relative max-h-[65rem] my-2 inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:align-middle sm:max-w-7xl sm:w-full w-[96%]"
+              class="font-sans relative min-h-[55rem] max-h-[55rem] my-2 inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:align-middle sm:max-w-7xl sm:w-full"
             >
               <div
                 class="flex gap-2 justify-between items-center border-b border-gray-200 p-4 mb-2"
@@ -121,32 +121,9 @@ provide('closeMediaLibraryModal', closeMediaLibraryModal)
                   <component :is="customMediaComponent" />
                 </div>
                 <div v-else>
-                  <NoneCustomMediaLibraryComponent />
+                  <DefaultMediaLibraryComponent />
                 </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/PageBuilder/DefaultComponents/DefaultMediaLibraryComponent.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <p class="myPrimaryParagraph">
+      Provide your own Media Library Component to integrate a custom media picker into the Page
+      Builder.
+      <br />
+      This allows full control over how media is selected and inserted.
+    </p>
+  </div>
+</template>

package/src/Components/PageBuilder/Settings/AdvancedPageBuilderSettings.vue

@@ -174,7 +174,7 @@ const updateCurrentTab = function (tab) {
 
                   <p class="whitespace-pre-line leading-5 mt-4">
                     Component Title:
-                    {{ getComponent?.title }}
+                    {{ component?.title }}
                   </p>
                   <p class="whitespace-pre-line leading-5 mt-4">
                     Component HTML:<br />

package/src/Components/PageBuilder/Settings/PageBuilderSettings.vue

@@ -90,7 +90,7 @@ const handleDownloadHTML = function () {
             type="button"
             class="myPrimaryButton text"
           >
-            Open Overview
+            Advanced Settings
           </button>
         </div>
       </div>
@@ -593,6 +593,32 @@ const handleDownloadHTML = function () {
         </button>
       </div>
     </div>
+    <!-- Download Layout HTML - end -->
+
+    <!-- Congig - start -->
+    <div class="mt-4 mb-4 py-8 border-b border-myPrimbryLightGrayColor">
+      <div class="flex items-left flex-col gap-1">
+        <h3 class="myQuaternaryHeader">Complete Configuration Overview</h3>
+        <p class="myPrimaryParagraph text-xs">
+          omplete configuration object currently used by the Page Builder. It includes information
+          about the user, form behavior, branding settings, and other context-specific data needed
+          for rendering and managing the builder environment.
+        </p>
+      </div>
+
+      <div class="mt-4 whitespace-pre-wrap text-white overflow-hidden bg-gray-900 max-w-2xl">
+        <div class="flex bg-gray-800/40 ring-1 ring-white/5">
+          <div class="-mb-px flex text-xs font-medium text-myPrimaryMediumGrayColor">
+            <div class="px-4 py-4 text-white">Configuration</div>
+          </div>
+        </div>
+        <div class="px-4 pb-8 pt-4 text-white text-xs break-all">
+          <p class="myPrimaryParagraph text-xs text-white">
+            config: {{ JSON.stringify(getConfigPageBuilder, null, 4) }}
+          </p>
+        </div>
+      </div>
+    </div>
+    <!-- Config - end -->
   </div>
-  <!-- Download Layout HTML - end -->
 </template>

package/src/DemoComponents/DemoBuilderComponents.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <p class="myPrimaryParagraph">Demo builder components here</p>
+  </div>
+</template>

package/src/DemoComponents/DemoMediaLibraryComponent.vue

@@ -0,0 +1,8 @@
+<script setup>
+import Unsplash from './DemoUnsplash.vue'
+</script>
+<template>
+  <div>
+    <Unsplash />
+  </div>
+</template>

package/src/DemoComponents/DemoUnsplash.vue

@@ -0,0 +1,351 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+const unsplashKey = import.meta.env.VITE_UNSPLASH_KEY
+import { usePageBuilderModal } from '../composables/usePageBuilderModal'
+import PageBuilderClass from '../composables/PageBuilderClass.ts'
+import { sharedPageBuilderStore } from '../stores/shared-store'
+
+const { closeMediaLibraryModal } = usePageBuilderModal()
+
+const pageBuilderStateStore = sharedPageBuilderStore
+
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
+
+const getIsLoading = ref(false)
+const getSearchTerm = ref('')
+const getCurrentPageNumber = ref(1)
+const getOrientationValue = ref('')
+const getCurrentImage = ref('')
+const getCurrentUser = ref('')
+
+const getUnsplashImages = ref([])
+
+const fetchUnsplash = async function () {
+  getIsLoading.value = true
+
+  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 || 'magazine'}${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 = function (data) {
+  getCurrentImage.value = data.url ? data.url : ''
+  getCurrentUser.value = data.user ? data.user : ''
+}
+
+const searchByOrientation = function (orientationParameter) {
+  // check if search term length is more than 0
+  if (getSearchTerm.value.length > 0 && getOrientationValue.value !== orientationParameter) {
+    getOrientationValue.value = orientationParameter
+    getCurrentPageNumber.value = 1
+    fetchUnsplash()
+  }
+}
+//
+// load images for previous page
+const previousPage = function () {
+  fetchUnsplash()
+}
+
+// load images for next page
+const nextPage = async function () {
+  fetchUnsplash()
+}
+
+const applySelectedImage = async function (imageURL) {
+  // Ensure the current image is set in the store with proper structure
+  pageBuilderClass.pageBuilderStateStore.setCurrentImage({
+    src: `${imageURL}`,
+  })
+
+  await pageBuilderClass.updateBasePrimaryImage()
+
+  closeMediaLibraryModal()
+}
+
+// on mounted
+onMounted(async () => {
+  let term = ''
+  let page = 1
+  if (localStorage.getItem('unsplash-query') && localStorage.getItem('unsplash-query').length > 0) {
+    term = getSearchTerm.value = localStorage.getItem('unsplash-query')
+    page = getCurrentPageNumber.value = localStorage.getItem('unsplash-page')
+    fetchUnsplash()
+  }
+
+  term ? getSearchTerm.value : 'Magazine'
+  page ? getCurrentPageNumber.value : 1
+  fetchUnsplash()
+
+  await fetchUnsplash()
+})
+</script>
+
+<template>
+  <div>
+    <div v-if="!getIsLoading">
+      <form
+        @submit.prevent="
+          () => {
+            getCurrentPageNumber = 1
+            fetchUnsplash()
+          }
+        "
+      >
+        <label
+          for="default-search"
+          class="mb-2 text-sm font-normal text-gray-900 sr-only dark:text-gray-300"
+          >Search</label
+        >
+
+        <div class="mysearchBarWithOptions">
+          <div class="relative w-full">
+            <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
+              type="search"
+              id="search_query"
+              v-model="getSearchTerm"
+              class="myPrimarySearchInput"
+              autocomplete="off"
+              placeholder="Search..."
+            />
+          </div>
+
+          <button
+            @click="
+              () => {
+                getCurrentPageNumber = 1
+                fetchUnsplash()
+              }
+            "
+            type="submit"
+            class="myPrimaryButton"
+          >
+            Search
+          </button>
+        </div>
+      </form>
+      <div v-if="getUnsplashImages && getUnsplashImages.results" class="mt-2">
+        <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')"
+              type="button"
+              class="myPrimaryButton hover:bg-myPrimaryBrandColor focus:outline-none focus:ring-0"
+              :class="{
+                'bg-myPrimaryBrandColor text-white': getOrientationValue === 'landscape',
+                '': getOrientationValue !== 'landscape',
+              }"
+            >
+              Landscape
+            </button>
+            <button
+              @click="searchByOrientation('portrait')"
+              type="button"
+              class="myPrimaryButton hover:bg-myPrimaryBrandColor focus:outline-none focus:ring-0"
+              :class="{
+                'bg-myPrimaryBrandColor text-white': getOrientationValue === 'portrait',
+                '': getOrientationValue !== 'portrait',
+              }"
+            >
+              Portrait
+            </button>
+            <button
+              @click="searchByOrientation('squarish')"
+              type="button"
+              class="myPrimaryButton hover:bg-myPrimaryBrandColor focus:outline-none focus:ring-0"
+              :class="{
+                'bg-myPrimaryBrandColor text-white': getOrientationValue === 'squarish',
+                '': getOrientationValue !== 'squarish',
+              }"
+            >
+              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="w-4 h-4 cursor-pointer"
+            >
+              <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">
+            <p class="myPrimaryParagraph text-xs italic">
+              Total pages {{ getUnsplashImages.total_pages }}
+            </p>
+            <p class="myPrimaryParagraph text-xs italic">Images {{ getUnsplashImages.total }}</p>
+            <div class="flex flex-1 justify-between sm:justify-end items-center gap-2">
+              <span
+                v-if="Number(getCurrentPageNumber) !== 1"
+                class="myPrimaryParagraph text-xs italic pr-2 pl-1 cursor-pointer underline"
+                @click="nextPage(Number((getCurrentPageNumber = 1)))"
+              >
+                First page
+              </span>
+            </div>
+            <button
+              v-if="Number(getCurrentPageNumber) > 1"
+              :disabled="Number(getCurrentPageNumber) < 1"
+              class="myPrimaryButton"
+              @click="previousPage(Number(getCurrentPageNumber--))"
+            >
+              {{
+                `Prev ${Number(getCurrentPageNumber) > 0 ? Number(getCurrentPageNumber) - 1 : Number(getCurrentPageNumber) - 1}`
+              }}
+            </button>
+
+            <span class="myPrimaryTag p-2.5">
+              {{ Number(getCurrentPageNumber) }}
+            </span>
+            <button
+              :disabled="Number(getCurrentPageNumber) >= getUnsplashImages.total_pages"
+              class="myPrimaryButton"
+              :class="{
+                'opacity-50': Number(getCurrentPageNumber) >= getUnsplashImages.total_pages,
+              }"
+              @click="nextPage(Number(getCurrentPageNumber++))"
+            >
+              {{
+                `Next ${Number(getCurrentPageNumber) > 0 ? Number(getCurrentPageNumber) + 1 : Number(getCurrentPageNumber) + 1}`
+              }}
+            </button>
+          </nav>
+        </div>
+
+        <div class="min-h-[34rem] max-h-[34rem] flex gap-6">
+          <div class="w-9/12 pr-1 rounded-lg overflow-y-auto">
+            <div class="grid md:grid-cols-4 sm:grid-cols-4 grid-cols-2 gap-2">
+              <div
+                v-for="image in getUnsplashImages.results"
+                :key="image.id"
+                @click="handleImageClick({ url: image.urls.regular, user: image.user.name })"
+                class="border border-gray-200 my-2 px-2 p-2 cursor-pointer"
+              >
+                <img
+                  :alt="image.user.name"
+                  class="group block w-full overflow-hidden cursor-pointer"
+                  :src="image.urls.thumb"
+                />
+                <p class="myPrimaryParagraph text-xs font-normal mt-2">By: {{ image.user.name }}</p>
+              </div>
+            </div>
+
+            <div v-if="getUnsplashImages.results.length < 1">
+              <p class="myPrimaryParagraph py-4 px-4">
+                <span v-if="getCurrentPageNumber === 1">
+                  We did not find any images. Make a new search.
+                </span>
+                <span v-if="getCurrentPageNumber > 1" @click="nextPage(1)" class="myPrimaryLink">
+                  No results on current page. Navigate to First Page.
+                </span>
+              </p>
+            </div>
+          </div>
+          <!-- Sidebar # start -->
+          <div class="w-3/12 overflow-y-auto">
+            <template v-if="getCurrentImage">
+              <img
+                class="mx-auto block w-full object-cover object-center cursor-pointer"
+                :src="`${getCurrentImage}`"
+                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">
+                      <dt class="text-gray-500">From:</dt>
+                      <dd class="text-gray-900">Unsplash</dd>
+                    </div>
+                    <div class="py-3 flex justify-between text-sm font-normal items-center">
+                      <dt class="text-gray-500">By:</dt>
+                      <dd class="text-gray-900">{{ getCurrentUser }}</dd>
+                    </div>
+                  </dl>
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+        <!-- Sidebar # end -->
+
+        <!-- Actions footer # start -->
+        <div class="px-4 py-3 flex gap-2 border-t border-gray-200 mt-4 justify-end">
+          <button
+            @click="closeMediaLibraryModal"
+            class="mySecondaryButton focus:ring-2 focus:ring-blue-500"
+            type="button"
+          >
+            Close
+          </button>
+          <button
+            v-if="getCurrentImage && typeof getCurrentImage === 'string'"
+            @click="applySelectedImage(getCurrentImage)"
+            class="myPrimaryButton focus:ring-2 focus:ring-blue-500"
+            type="button"
+          >
+            Select image
+          </button>
+        </div>
+        <!-- Actions footer # end -->
+      </div>
+    </div>
+    <div v-else>
+      <button class="sr-only">Focusable fallback</button>
+    </div>
+    <template v-if="getIsLoading">
+      <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]"
+        >
+          <span
+            class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
+            >Loading...</span
+          >
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

package/src/{Components/Homepage → DemoComponents}/HomeSection.vue

@@ -1,8 +1,24 @@
 <script setup>
-import FullWidthElement from '../../Components/Layouts/FullWidthElement.vue'
-import PageBuilder from '../../PageBuilder/PageBuilder.vue'
-import PageBuilderClass from '../../composables/PageBuilderClass.ts'
-import { sharedPageBuilderStore } from '../../stores/shared-store'
+import FullWidthElement from '../Components/Layouts/FullWidthElement.vue'
+import PageBuilder from '../PageBuilder/PageBuilder.vue'
+import PageBuilderClass from '../composables/PageBuilderClass.ts'
+
+import DemoMediaLibraryComponent from './DemoMediaLibraryComponent.vue'
+import DemoBuilderComponents from './DemoBuilderComponents.vue'
+import { computed, onMounted } from 'vue'
+import { sharedPageBuilderStore } from '../stores/shared-store'
+import html from './html.json'
+
+const pageBuilderStateStore = sharedPageBuilderStore
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
+
+const getLocalStorageItemName = computed(() => {
+  return pageBuilderStateStore.getLocalStorageItemName
+})
+
+const getComponents = computed(() => {
+  return pageBuilderStateStore.getComponents
+})
 
 // first button function
 const handleButton = function () {
@@ -53,33 +69,38 @@ const features = [
 ]
 
 const configPageBuilder = {
-  // userForPageBuilder: {
-  //   name: 'John Doe',
-  // },
+  userForPageBuilder: {
+    name: 'John Doe',
+  },
   updateOrCreate: {
-    formType: 'update',
+    formType: 'create',
     formName: 'news',
   },
   pageBuilderLogo: {
     src: '/logo/logo.svg',
   },
-  // resourceData: {
-  //   title: 'Demo Article',
-  //   id: 1,
-  // },
-  // userSettings: {
-  //   // theme: 'light',
-  //   // language: 'en',
-  //   // autoSave: true,
-  // },
+  resourceData: {
+    title: 'Demo Article',
+    id: 1,
+  },
+  userSettings: {
+    // theme: 'light',
+    // language: 'en',
+    // autoSave: true,
+  },
   settings: {
     brandColor: '#DB93B0',
   },
 }
 
-const pageBuilderStateStore = sharedPageBuilderStore
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 pageBuilderClass.setConfigPageBuilder(configPageBuilder)
+
+onMounted(async () => {
+  if (localStorage.getItem(getLocalStorageItemName.value)) {
+  } else {
+    pageBuilderClass.loadExistingContent(JSON.stringify(html), true)
+  }
+})
 </script>
 
 <template>
@@ -109,7 +130,8 @@ pageBuilderClass.setConfigPageBuilder(configPageBuilder)
         </p>
       </div>
       <div>
-        <PageBuilder></PageBuilder>
+        <!--   :CustomBuilderComponents="DemoBuilderComponents" -->
+        <PageBuilder :CustomMediaLibraryComponent="DemoMediaLibraryComponent"></PageBuilder>
       </div>
     </div>