@myissue/vue-website-page-builder 3.2.25 → 3.2.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "v3.2.25",
+  "version": "v3.2.28",
   "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/Components/PageBuilder/Settings/AdvancedPageBuilderSettings.vue

@@ -166,7 +166,7 @@ function prettifyHtml(html) {
                     <thead class="bg-gray-50">
                       <tr>
                         <th
-                          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                          class="px-6 py-3 text-left text-xs font-medium text-gray-900 tracking-wider"
                         >
                           Element classes
                         </th>
@@ -245,7 +245,7 @@ function prettifyHtml(html) {
                     <thead class="bg-gray-50">
                       <tr>
                         <th
-                          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                          class="px-6 py-3 text-left text-xs font-medium text-gray-900 tracking-wider"
                         >
                           HTML Code
                         </th>
@@ -327,7 +327,7 @@ function prettifyHtml(html) {
                       <thead class="bg-gray-50">
                         <tr>
                           <th
-                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                            class="px-6 py-3 text-left text-xs font-medium text-gray-900 tracking-wider"
                           >
                             HTML Code
                           </th>

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

@@ -481,103 +481,6 @@ const handleDownloadHTML = function () {
           </div>
         </div>
         <!-- Form Type Table - end -->
-
-        <div
-          class="mt-8"
-          v-if="
-            getConfigPageBuilder?.updateOrCreate &&
-            !isEmptyObject(getConfigPageBuilder.updateOrCreate)
-          "
-        >
-          <h4 class="myQuaternaryHeader text-sm mb-2">Delete Saved Layout</h4>
-          <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
-            <div class="overflow-x-auto">
-              <table class="min-w-full divide-y divide-gray-300">
-                <thead class="bg-gray-50">
-                  <tr>
-                    <th
-                      scope="col"
-                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                    >
-                      Option
-                    </th>
-                    <th
-                      scope="col"
-                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                    >
-                      Description
-                    </th>
-                  </tr>
-                </thead>
-
-                <tbody class="bg-white divide-y divide-gray-200">
-                  <tr>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
-                      Form Type
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                      <span
-                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
-                        :class="
-                          getConfigPageBuilder.updateOrCreate === 'create'
-                            ? 'bg-green-100 text-green-800'
-                            : 'bg-blue-100 text-blue-800'
-                        "
-                      >
-                        <span
-                          v-if="
-                            getConfigPageBuilder &&
-                            getConfigPageBuilder.updateOrCreate.formType === 'create'
-                          "
-                        >
-                          {{ getConfigPageBuilder.updateOrCreate.formType }}
-                        </span>
-                        <span
-                          v-if="
-                            getConfigPageBuilder &&
-                            getConfigPageBuilder.updateOrCreate.formType === 'update'
-                          "
-                        >
-                          {{ getConfigPageBuilder.updateOrCreate.formType }}
-                        </span>
-                      </span>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
-                      Delete
-                    </td>
-                    <td
-                      v-if="getConfigPageBuilder?.updateOrCreate.formType === 'create'"
-                      class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"
-                    >
-                      <button
-                        class="myPrimaryDeleteButton w-full"
-                        @click="pageBuilderClass.removeItemComponentsLocalStorageCreate"
-                        type="button"
-                      >
-                        Delete
-                      </button>
-                    </td>
-                    <td
-                      v-if="getConfigPageBuilder?.updateOrCreate.formType === 'update'"
-                      class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"
-                    >
-                      <button
-                        class="myPrimaryDeleteButton w-full"
-                        @click="pageBuilderClass.removeItemComponentsLocalStorageUpdate"
-                        type="button"
-                      >
-                        Delete
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-        <!-- Delete Draft - end -->
       </div>
     </div>
     <!-- Advanced Settings - end -->

package/src/DemoComponents/DemoUnsplash.vue

@@ -2,6 +2,8 @@
 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 PageBuilderClass from '../composables/PageBuilderClass.ts'
 import { sharedPageBuilderStore } from '../stores/shared-store'
 
@@ -12,6 +14,7 @@ const pageBuilderStateStore = sharedPageBuilderStore
 const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
 const getIsLoading = ref(false)
+const getIsLoadingImage = ref(false)
 const getSearchTerm = ref('')
 const getCurrentPageNumber = ref(1)
 const getOrientationValue = ref('')
@@ -62,9 +65,18 @@ const fetchUnsplash = async function () {
     getIsLoading.value = false
   }
 }
-const handleImageClick = function (data) {
-  getCurrentImage.value = data.url ? data.url : ''
-  getCurrentUser.value = data.user ? data.user : ''
+
+const handleImageClick = async function (data) {
+  getIsLoadingImage.value = true
+
+  if (data.url) {
+    await preloadImage(data.url)
+  }
+
+  await delay(100)
+  getCurrentImage.value = data.url || ''
+
+  getIsLoadingImage.value = false
 }
 
 const searchByOrientation = function (orientationParameter) {
@@ -155,19 +167,21 @@ onMounted(async () => {
               }
             "
             type="submit"
-            class="myPrimaryButton"
+            class="myPrimaryTag break-keep mr-4"
           >
             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="flex lg:justify-between justify-end items-center gap-2 py-2 px-2 mb-1 rounded-full border border-gray-200 shadow-sm"
+        >
           <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="myPrimaryTag"
               :class="{
                 'bg-myPrimaryBrandColor text-white': getOrientationValue === 'landscape',
                 '': getOrientationValue !== 'landscape',
@@ -178,7 +192,7 @@ onMounted(async () => {
             <button
               @click="searchByOrientation('portrait')"
               type="button"
-              class="myPrimaryButton hover:bg-myPrimaryBrandColor focus:outline-none focus:ring-0"
+              class="myPrimaryTag"
               :class="{
                 'bg-myPrimaryBrandColor text-white': getOrientationValue === 'portrait',
                 '': getOrientationValue !== 'portrait',
@@ -189,7 +203,7 @@ onMounted(async () => {
             <button
               @click="searchByOrientation('squarish')"
               type="button"
-              class="myPrimaryButton hover:bg-myPrimaryBrandColor focus:outline-none focus:ring-0"
+              class="myPrimaryTag"
               :class="{
                 'bg-myPrimaryBrandColor text-white': getOrientationValue === 'squarish',
                 '': getOrientationValue !== 'squarish',
@@ -228,7 +242,7 @@ onMounted(async () => {
             <button
               v-if="Number(getCurrentPageNumber) > 1"
               :disabled="Number(getCurrentPageNumber) < 1"
-              class="myPrimaryButton"
+              class="myPrimaryTag"
               @click="previousPage(Number(getCurrentPageNumber--))"
             >
               {{
@@ -236,12 +250,12 @@ onMounted(async () => {
               }}
             </button>
 
-            <span class="myPrimaryTag p-2.5">
+            <span class="myPrimaryTag py-2.5 px-4">
               {{ Number(getCurrentPageNumber) }}
             </span>
             <button
               :disabled="Number(getCurrentPageNumber) >= getUnsplashImages.total_pages"
-              class="myPrimaryButton"
+              class="myPrimaryTag"
               :class="{
                 'opacity-50': Number(getCurrentPageNumber) >= getUnsplashImages.total_pages,
               }"
@@ -254,7 +268,7 @@ onMounted(async () => {
           </nav>
         </div>
 
-        <div class="min-h-[34rem] max-h-[34rem] flex gap-6">
+        <div class="min-h-[33rem] max-h-[33rem] 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
@@ -285,7 +299,19 @@ onMounted(async () => {
           </div>
           <!-- Sidebar # start -->
           <div class="w-3/12 overflow-y-auto">
-            <template v-if="getCurrentImage">
+            <template v-if="getIsLoadingImage">
+              <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>
+            <template v-if="getCurrentImage && !getIsLoadingImage">
               <img
                 class="mx-auto block w-full object-cover object-center cursor-pointer"
                 :src="`${getCurrentImage}`"

package/src/composables/preloadImage.ts

@@ -0,0 +1,8 @@
+export function preloadImage(url: string) {
+  return new Promise((resolve, reject) => {
+    const img = new window.Image()
+    img.onload = resolve
+    img.onerror = reject
+    img.src = url
+  })
+}