@myissue/vue-website-page-builder 3.0.32 → 3.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "v3.0.32",
+  "version": "v3.0.34",
   "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/Modals/MediaLibraryModal.vue

@@ -7,7 +7,7 @@ import {
   TransitionRoot,
 } from '@headlessui/vue'
 import { provide } from 'vue'
-import NoneCustomMediaLibraryComponent from '@/Components/PageBuilder/NoneCustomMediaLibraryComponent.vue'
+import NoneCustomMediaLibraryComponent from '@/Components/PageBuilder/DemoContent/NoneCustomMediaLibraryComponent.vue'
 
 const props = defineProps({
   title: {

package/src/Components/Modals/PageBuilderPreviewModal.vue

@@ -23,6 +23,7 @@ defineProps({
   },
 })
 
+const pageBuilderStateStore = usePageBuilderStateStore(internalPinia)
 const emit = defineEmits(['firstPageBuilderPreviewModalButton'])
 
 // first button function
@@ -38,8 +39,6 @@ const handleEscapeKey = function () {
   firstButton()
 }
 
-const pageBuilderStateStore = usePageBuilderStateStore(internalPinia)
-
 const getPageBuilderLogo = computed(() => {
   return pageBuilderStateStore.getPageBuilderLogo
 })

package/src/Components/PageBuilder/{NoneCustomSearchComponent.vue → DemoContent/NoneCustomSearchComponent.vue}

@@ -1,23 +1,24 @@
 <script setup lang="ts">
-import componentHelpers from '../../utils/html-elements/componentHelpers'
-import components from '../../utils/html-elements/component'
-import PageBuilderClass from '../../composables/PageBuilderClass'
-import { usePageBuilderModal } from '../../composables/usePageBuilderModal'
-import { generateComponentPreview } from '../../utils/componentPreviews'
-import type { ComponentObject, PageBuilderStateStore } from '../../types'
+import componentHelpers from '../../../utils/html-elements/componentHelpers'
+import components from '../../../utils/html-elements/component'
+import PageBuilderClass from '../../../composables/PageBuilderClass'
+import { usePageBuilderModal } from '../../../composables/usePageBuilderModal'
+import { generateComponentPreview } from '../../../utils/componentPreviews'
+import type { ComponentObject } from '../../../types'
+import { usePageBuilderStateStore } from '../../../stores/page-builder-state'
+import type { Pinia } from 'pinia'
 
-import { inject, ref } from 'vue'
+import { inject } from 'vue'
 
-// Get stores from parent PageBuilder component
-const pageBuilderStateStore = inject<PageBuilderStateStore>('pageBuilderStateStore')
+// Get store from parent PageBuilder component
+const internalPinia = inject('internalPinia') as Pinia
 
 // Get modal close function
 const { closeAddComponentModal } = usePageBuilderModal()
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore!)
+const pageBuilderStateStore = usePageBuilderStateStore(internalPinia)
 
-// Track image loading states
-const imageLoadingStates = ref<Record<string, boolean>>({})
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
 // Super simple component addition with professional modal closing!
 const handleDropComponent = function (componentObject: ComponentObject) {
@@ -74,8 +75,8 @@ const getSvgPreview = (title: string) => {
           @click="handleDropComponent(helper)"
         >
           <div class="max-h-72 cursor-pointer object-contain bg-white mx-auto">
-            <div class="mr-2" v-html="helper.icon"></div>
-            <h4 class="myPrimaryParagraph text-sm font-normal">{{ helper.title }}</h4>
+            <div v-if="false" class="mr-2" v-html="helper.icon"></div>
+            <h4 class="myPrimaryParagraph text-base font-medium">{{ helper.title }}</h4>
           </div>
           <div class="myPrimaryParagraph text-xs font-normal pt-2">
             Click to add {{ helper.title.toLowerCase() }} component

package/src/Components/Search/SearchComponents.vue

@@ -1,6 +1,6 @@
 <script setup>
 import Modal from '@/Components/Modals/Modal.vue'
-import NoneCustomSearchComponent from '@/Components/PageBuilder/NoneCustomSearchComponent.vue'
+import NoneCustomSearchComponent from '@/Components/PageBuilder/DemoContent/NoneCustomSearchComponent.vue'
 
 const props = defineProps({
   firstButtonText: {

package/src/PageBuilder/PageBuilder.vue

@@ -400,7 +400,7 @@ onMounted(async () => {
                 >
                   <div class="flex items-center justify-center gap-2">
                     <span class="lg:block hidden">
-                      <div>Add new Elements</div>
+                      <div>Add new Components</div>
                     </span>
                     <span
                       class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
@@ -438,12 +438,12 @@ onMounted(async () => {
                     @click="pageBuilderStateStore.setMenuRight(true)"
                   >
                     <div class="flex items-center justify-center gap-2">
-                      <span class="lg:block hidden"> Design </span>
+                      <span class="lg:block hidden"> Styling </span>
 
                       <span
                         class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
                       >
-                        <span class="myMediumIcon material-symbols-outlined"> palette </span>
+                        <span class="myMediumIcon material-symbols-outlined"> tune </span>
                       </span>
                     </div>
                   </button>
@@ -482,7 +482,7 @@ onMounted(async () => {
               >
                 <div class="flex items-center justify-center gap-2 font-medium cursor-pointer">
                   <span class="lg:block hidden">
-                    <div>Add new Elements</div>
+                    <div>Add new Components</div>
                   </span>
                 </div>
 
@@ -492,7 +492,7 @@ onMounted(async () => {
                     class="myPrimaryButton flex items-center gap-2 justify-center"
                   >
                     <span class="myMediumIcon material-symbols-outlined"> interests </span>
-                    Add new Elements
+                    Add new Components
                   </button>
                 </div>
               </div>

package/src/utils/html-elements/componentHelpers.ts

@@ -92,7 +92,7 @@ const componentHelpers: ComponentHelper[] = [
     title: 'Link',
     icon: `
         <span class="material-symbols-outlined">
-        horizontal_rule
+        link
         </span>
         `,
   },

package/src/Components/Homepage/Navbar.vue

@@ -1,30 +0,0 @@
-<script setup>
-const emit = defineEmits(['handleButton']);
-
-// first button function
-const handleButton = function () {
-  emit('handleButton');
-};
-</script>
-
-<template>
-  <nav
-    class="px-6 py-6 mx-auto flex items-center justify-between bg-gray-50 px-4 lg:h-[10vh] h-[16vh]"
-    aria-label="Global"
-  >
-    <img
-      class="h-6"
-      src="/logo/logo.svg"
-      alt="Logo"
-    />
-
-    <div class="flex lg:gap-x-12 myPrimaryGap">
-      <p
-        @click="handleButton"
-        class="text-lg font-medium text-myPrimaryDarkGrayColor flex gap-2 items-center cursor-pointer"
-      >
-        Start Builder
-      </p>
-    </div>
-  </nav>
-</template>

package/src/Components/MediaLibrary/SidebarUnsplash.vue

@@ -1,33 +0,0 @@
-<script setup>
-import { ref, computed, onMounted, inject } from 'vue'
-
-// Get consolidated store from parent PageBuilder component
-const pageBuilderStateStore = inject('pageBuilderStateStore')
-
-const getCurrentImage = computed(() => {
-  return pageBuilderStateStore.getCurrentImage
-})
-</script>
-
-<template>
-  <!-- Loading # end -->
-  <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.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">
-            <dt class="text-gray-500">From</dt>
-            <dd class="text-gray-900">Unsplash</dd>
-          </div>
-        </dl>
-      </div>
-    </div>
-  </div>
-</template>

package/src/Components/MediaLibrary/Unsplash.vue

@@ -1,265 +0,0 @@
-<script setup>
-import { ref, computed, onMounted, inject } from 'vue'
-import { useUnsplashStore } from '@/stores/unsplash'
-
-// Get stores from parent PageBuilder component
-const unsplashStore = useUnsplashStore()
-const searchQuery = ref('')
-const currentPage = ref(1)
-const orientation = ref(null)
-
-const getSearchTerm = computed(() => {
-  return unsplashStore.getSearchTerm
-})
-// unspalsh images
-const getUnsplashImages = computed(() => {
-  return unsplashStore.getUnsplashImages
-})
-
-const handleImageClick = function (file) {
-  pageBuilderStateStore.setCurrentImage({ src: file })
-  pageBuilderStateStore.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()
-  }
-}
-//
-// load images for previous page
-const previousPage = function () {
-  searchUnsplash()
-}
-
-// load images for next page
-const nextPage = function () {
-  searchUnsplash()
-}
-//
-//
-// search images
-const searchUnsplash = function () {
-  if (
-    getUnsplashImages.value &&
-    getUnsplashImages.value.fetchedMedia &&
-    Array.isArray(getUnsplashImages.value.fetchedMedia.results) &&
-    getUnsplashImages.value.fetchedMedia.results.length === 0
-  ) {
-    currentPage.value = 1
-  }
-
-  // set values in store
-
-  localStorage.setItem('unsplash-query', searchQuery.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()
-  } else {
-    searchQuery.value = 'Magazine'
-    searchUnsplash()
-  }
-})
-</script>
-
-<template>
-  <div>
-    <form @submit.prevent="searchUnsplash">
-      <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="searchQuery"
-            class="myPrimarySearchInput"
-            autocomplete="off"
-            placeholder="Search..."
-          />
-        </div>
-
-        <button type="submit" class="myPrimaryButton">Search</button>
-      </div>
-    </form>
-
-    <div
-      v-if="
-        getUnsplashImages &&
-        !getUnsplashImages.isLoading &&
-        getUnsplashImages.isError &&
-        !getUnsplashImages.isSuccess
-      "
-    >
-      <p class="myPrimaryParagraphError">{{ getUnsplashImages.error }}</p>
-    </div>
-
-    <div
-      v-if="
-        getUnsplashImages &&
-        getUnsplashImages.fetchedMedia &&
-        getUnsplashImages.fetchedMedia.results &&
-        !getUnsplashImages.isLoading &&
-        !getUnsplashImages.isError
-      "
-      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="myPrimaryTag"
-            :class="{
-              'bg-myPrimaryBrandColor text-white': orientation === 'landscape',
-              '': orientation !== 'landscape',
-            }"
-          >
-            Landscape
-          </button>
-          <button
-            @click="searchByOrientation('portrait')"
-            type="button"
-            class="myPrimaryTag"
-            :class="{
-              'bg-myPrimaryBrandColor text-white': orientation === 'portrait',
-              '': orientation !== 'portrait',
-            }"
-          >
-            Portrait
-          </button>
-          <button
-            @click="searchByOrientation('squarish')"
-            type="button"
-            class="myPrimaryTag"
-            :class="{
-              'bg-myPrimaryBrandColor text-white': orientation === 'squarish',
-              '': orientation !== '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.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">
-            <span
-              v-if="currentPage !== 1"
-              class="myPrimaryParagraph text-xs italic pr-2 pl-1 cursor-pointer underline"
-              @click="nextPage((currentPage = 1))"
-            >
-              First page
-            </span>
-          </div>
-          <button
-            v-if="currentPage > 1"
-            :disabled="currentPage < 1"
-            class="myPrimaryButton"
-            @click="previousPage(currentPage--)"
-          >
-            {{ `Prev ${currentPage > 0 ? currentPage - 1 : currentPage - 1}` }}
-          </button>
-
-          <span class="myPrimaryTag p-2.5">
-            {{ currentPage }}
-          </span>
-          <button
-            :disabled="currentPage >= getUnsplashImages.fetchedMedia.total_pages"
-            class="myPrimaryButton"
-            :class="{
-              'opacity-50': currentPage >= getUnsplashImages.fetchedMedia.total_pages,
-            }"
-            @click="nextPage(currentPage++)"
-          >
-            {{ `Next ${currentPage > 0 ? currentPage + 1 : currentPage + 1}` }}
-          </button>
-        </nav>
-      </div>
-
-      <div
-        class="overflow-y-scroll pr-1 rounded-lg md:min-h-[25.5rem] md:max-h-[25.5em] min-h-[12rem] max-h-[12rem]"
-      >
-        <div class="grid md:grid-cols-6 sm:grid-cols-4 grid-cols-2 gap-2">
-          <div
-            v-for="image in getUnsplashImages.fetchedMedia.results"
-            :key="image.id"
-            @click="handleImageClick(image.urls.regular)"
-            class="border border-myPrimaryLightGrayColor rounded-lg px-2 p-2 cursor-pointer bg-gray-50"
-          >
-            <img
-              :alt="image.user.name"
-              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>
-          </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">
-              No results on current page. Navigate to First Page.
-            </span>
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <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]"
-        >
-          <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>
-    </div>
-  </div>
-</template>

package/src/Components/PageBuilder/AdvancedPageBuilderSettings.vue

@@ -1,7 +0,0 @@
-<script setup>
-import { ref, computed, inject } from 'vue'
-import PageBuilderClass from '@/composables/PageBuilderClass.ts'
-
-// Get stores from parent PageBuilder component
-const pageBuilderStateStore = inject('pageBuilderStateStore')
-</script>

package/src/Components/PageBuilder/DropdownsPlusToggles/SaveDesign.vue

@@ -1,7 +0,0 @@
-<template>
-  <div>
-    <button class="myPrimaryButton">
-      <p>Save</p>
-    </button>
-  </div>
-</template>

package/src/Components/PageBuilder/PageBuilderSettings.vue

@@ -1,8 +0,0 @@
-<script setup>
-import { ref, onMounted, inject } from 'vue'
-import { Switch } from '@headlessui/vue'
-import Modal from '@/Components/Modals/Modal.vue'
-
-// Get stores from parent PageBuilder component
-const pageBuilderStateStore = inject('pageBuilderStateStore')
-</script>

package/src/composables/extract-text-content-html.ts

@@ -1,34 +0,0 @@
-const extractAllTextContent = (html: string, maxLength: number): string => {
-  const parser = new DOMParser()
-  const doc = parser.parseFromString(html, 'text/html')
-
-  // Extract content from all elements and insert space after each dot
-  const allElements = doc.body.querySelectorAll('*')
-  const contentArray = Array.from(allElements).map(
-    (element) => element.textContent?.trim().replace(/\./g, '. ') || '',
-  )
-
-  // Join the extracted content into a single string
-  let content = contentArray.join(' ')
-  content = content.replace(/\s+/g, ' ')
-
-  // Limit the content to the first maxLength characters
-  content = content.slice(0, maxLength)
-
-  return content
-}
-
-export const extractTextContentHTML = function extractTextContentHTML(
-  html: string | null | undefined,
-  maxLength: number,
-  postType: string = 'Page',
-): string {
-  if (html) {
-    // Extract all text content
-    const extractedContent = extractAllTextContent(html, maxLength)
-
-    return extractedContent ? extractedContent : `Fashion & Jobs | ${postType}`
-  } else {
-    return `Fashion & Jobs | ${postType}`
-  }
-}