@myissue/vue-website-page-builder 3.1.13 → 3.1.15

package/src/stores/page-builder-state.ts

@@ -1,35 +1,14 @@
 import { defineStore } from 'pinia'
 import { nextTick } from 'vue'
-import { vueFetch } from '@/composables/vueFetch'
 import type {
   ComponentObject,
-  FetchedComponentsResponse,
   SetPushComponentsPayload,
-  LoadComponentsData,
   ImageObject,
-  UserSettings,
-  User,
-} from '@/types'
-
-// Media Library interfaces
-interface UnsplashImagesData {
-  fetchedMedia: unknown
-  isError: boolean | null
-  error: unknown
-  errors: unknown
-  isLoading: boolean | null
-  isSuccess: boolean | null
-}
-
-interface LoadUnsplashImagesPayload {
-  orientation?: string
-  currentPage: number
-  searchTerm?: string
-}
+  PageBuilderConfig,
+} from '../types'
 
 interface PageBuilderState {
   // Core Page Builder State
-  pageBuilderLogo: string | null
   componentArrayAddMethod: string | null
   localStorageItemName: string | null
   showModalTipTap: boolean
@@ -73,9 +52,7 @@ interface PageBuilderState {
   component: ComponentObject | null
   components: ComponentObject[]
   basePrimaryImage: string | null
-  fetchedComponents: FetchedComponentsResponse | null
-  currentResourceData: { title: string; id: number } | null
-  updateOrCreate: string
+  configPageBuilder: PageBuilderConfig | null
 
   // Media Library State
   currentImage: ImageObject
@@ -83,40 +60,11 @@ interface PageBuilderState {
 
   // User State
   isLoading: boolean
-  userSettings: UserSettings | null
-  currentUser: User | null
-
-  // Unsplash State
-  unsplashImages: UnsplashImagesData | null
-  searchTerm: string
-  currentPageNumber: number
-  orientationValue: string | null
 }
 
-// get components
-const {
-  handleData: handlefetchComponents,
-  fetchedData: fetchedComponents,
-  isLoading,
-  isError,
-  error,
-} = vueFetch()
-
-// get unsplash images
-const {
-  handleData: handleGetImages,
-  fetchedData: fetchedMedia,
-  isError: isErrorImages,
-  error: errorImages,
-  errors: errorsImages,
-  isLoading: isLoadingImages,
-  isSuccess: isSuccessImages,
-} = vueFetch()
-
 export const usePageBuilderStateStore = defineStore('pageBuilderState', {
   state: (): PageBuilderState => ({
     // Core Page Builder State
-    pageBuilderLogo: null,
     componentArrayAddMethod: null,
     localStorageItemName: null,
     showModalTipTap: false,
@@ -160,9 +108,7 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     component: null,
     components: [],
     basePrimaryImage: null,
-    fetchedComponents: null,
-    currentResourceData: null,
-    updateOrCreate: '',
+    configPageBuilder: null,
 
     // Media Library State
     currentImage: { src: '' },
@@ -170,20 +116,9 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
 
     // User State
     isLoading: false,
-    userSettings: null,
-    currentUser: null,
-
-    // Unsplash State
-    unsplashImages: null,
-    searchTerm: '',
-    currentPageNumber: 1,
-    orientationValue: null,
   }),
   getters: {
     // Core Page Builder Getters
-    getPageBuilderLogo(state: PageBuilderState): string | null {
-      return state.pageBuilderLogo
-    },
     getComponentArrayAddMethod(state: PageBuilderState): string | null {
       return state.componentArrayAddMethod
     },
@@ -313,27 +248,9 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     getBasePrimaryImage(state: PageBuilderState): string | null {
       return state.basePrimaryImage
     },
-    getFetchedComponents(): {
-      isLoading: boolean
-      isError: boolean
-      error: string | null
-      fetchedData: unknown
-    } {
-      return {
-        isLoading: isLoading.value,
-        isError: isError.value,
-        error: error.value,
-        fetchedData: fetchedComponents.value,
-      }
-    },
-    getFetchedComponentsData(state: PageBuilderState): FetchedComponentsResponse | null {
-      return state.fetchedComponents
-    },
-    getCurrentResourceData(state: PageBuilderState): { title: string; id: number } | null {
-      return state.currentResourceData
-    },
-    getUpdateOrCreate(state: PageBuilderState): string {
-      return state.updateOrCreate
+
+    getConfigPageBuilder(state: PageBuilderState): PageBuilderConfig | null {
+      return state.configPageBuilder
     },
 
     // Media Library Getters
@@ -346,22 +263,8 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
 
     // User Getters
     getIsLoading: (state: PageBuilderState): boolean => state.isLoading,
-    getUserSettings: (state: PageBuilderState): UserSettings | null => state.userSettings,
-    getCurrentUser: (state: PageBuilderState): User | null => state.currentUser,
-
-    // Unsplash Getters
-    getUnsplashImages: (state: PageBuilderState): UnsplashImagesData | null => {
-      return state.unsplashImages
-    },
-    getSearchTerm: (state: PageBuilderState): string => state.searchTerm,
-    getCurrentPageNumber: (state: PageBuilderState): number => state.currentPageNumber,
-    getOrientationValue: (state: PageBuilderState): string | null => state.orientationValue,
   },
   actions: {
-    // Core Page Builder Actions
-    setPageBuilderLogo(payload: string | null): void {
-      this.pageBuilderLogo = payload
-    },
     setComponentArrayAddMethod(payload: string | null): void {
       this.componentArrayAddMethod = payload
     },
@@ -531,34 +434,9 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     setCurrentLayoutPreview(payload: string): void {
       localStorage.setItem('preview', payload)
     },
-    setFetchedComponents(payload: FetchedComponentsResponse | null): void {
-      this.fetchedComponents = payload
-    },
-
-    async setLoadComponents(_data: LoadComponentsData): Promise<void> {
-      this.setFetchedComponents(null)
 
-      try {
-        await handlefetchComponents('/components.json', {}, { additionalCallTime: 500 })
-      } catch (err) {
-        console.log(`Error: ${err}`)
-      }
-
-      // fetchedComponents.value is an object containing a components property
-      this.setFetchedComponents(
-        fetchedComponents &&
-          fetchedComponents.value &&
-          typeof fetchedComponents.value === 'object' &&
-          'components' in fetchedComponents.value
-          ? (fetchedComponents.value as FetchedComponentsResponse)
-          : null,
-      )
-    },
-    setCurrentResourceData(payload: { title: string; id: number } | null): void {
-      this.currentResourceData = payload
-    },
-    setUpdateOrCreate(payload: string): void {
-      this.updateOrCreate = payload
+    setConfigPageBuilder(payload: PageBuilderConfig | null): void {
+      this.configPageBuilder = payload
     },
 
     // Media Library Actions
@@ -573,66 +451,5 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     setIsLoading(payload: boolean): void {
       this.isLoading = payload
     },
-    setUserSettings(payload: UserSettings | null): void {
-      this.userSettings = payload
-    },
-    setCurrentUser(payload: User | null): void {
-      this.currentUser = payload
-    },
-
-    // Unsplash Actions
-    setUnsplashImages(payload: UnsplashImagesData | null): void {
-      this.unsplashImages = payload
-    },
-    setSearchTerm(payload: string): void {
-      this.searchTerm = payload
-    },
-    setCurrentPageNumber(payload: number): void {
-      this.currentPageNumber = payload
-    },
-    setOrientationValue(payload: string | null): void {
-      this.orientationValue = payload
-    },
-
-    // Load Unsplash images
-    async setLoadUnsplashImages(payload: LoadUnsplashImagesPayload): Promise<void> {
-      this.setUnsplashImages({
-        fetchedMedia: null,
-        isError: null,
-        error: null,
-        errors: null,
-        isLoading: true,
-        isSuccess: null,
-      })
-
-      const orientationType = payload.orientation ? `&orientation=${payload.orientation}` : ''
-
-      const unsplashKey = import.meta.env.VITE_UNSPLASH_KEY as string
-
-      try {
-        await handleGetImages(
-          `https://api.unsplash.com/search/photos?page=${payload.currentPage}&per_page=24&query=${payload.searchTerm || 'a'}${orientationType}`,
-          {
-            headers: {
-              'Accept-Version': 'v1',
-              Authorization: unsplashKey,
-            },
-          },
-          { additionalCallTime: 500 },
-        )
-      } catch (err) {
-        console.log(`Error: ${err}`)
-      }
-
-      // Update state directly instead of committing mutations
-      this.setUnsplashImages({
-        fetchedMedia: fetchedMedia.value,
-        isError: isErrorImages.value,
-        error: errorImages.value,
-        errors: errorsImages.value,
-        isLoading: isLoadingImages.value,
-        isSuccess: isSuccessImages.value,
-      })
-    },
   },
 })

package/src/types/index.ts

@@ -27,8 +27,6 @@ export interface PageBuilderStateStore {
   getFontDesktop: string | null
   getFontTablet: string | null
   getFontMobile: string | null
-  getUpdateOrCreate: string
-  getCurrentResourceData: { title: string; id: number } | null
   setElement: (element: HTMLElement | null) => void
   setMenuRight: (value: boolean) => void
   setComponent: (component: ComponentObject | null) => void
@@ -57,7 +55,6 @@ export interface PageBuilderStateStore {
   setPushComponents: (payload: SetPushComponentsPayload) => void
   setLocalStorageItemName: (name: string | null) => void
   setUpdateOrCreate: (mode: string) => void
-  setCurrentResourceData: (data: { title: string; id: number } | null) => void
   setFontWeight: (weight: string) => void
   setFontFamily: (family: string) => void
   setFontStyle: (style: string) => void
@@ -94,15 +91,21 @@ export interface PageBuilderUser {
   name: string
 }
 
-// User settings interface
-export interface UserSettings {
-  theme: 'light' | 'dark' | 'auto'
-  language: string
-  notifications?: boolean
-  autoSave: boolean
+// Page Builder Configuration interface
+export interface PageBuilderConfig {
+  updateOrCreate?: 'create' | 'update'
+  pageBuilderLogo?: string
+  resourceData?: { title: string; id: number } | null
+  userForPageBuilder?: { name: string } | null
   [key: string]: unknown
+  userSettings: {
+    theme: 'light' | 'dark' | 'auto'
+    language: string
+    notifications?: boolean
+    autoSave: boolean
+    [key: string]: unknown
+  }
 }
-
 // Tailwind utility interfaces
 export interface TailwindColors {
   backgroundColorVariables: string[]

package/src/utils/builder/html-doc-declaration-with-components.ts

@@ -1,4 +1,4 @@
-import tailwindCSS from '@/css/app.css?inline'
+import tailwindCSS from '../../css/app.css?inline'
 
 const fullHTMLContent = function (HTML: string): string {
   return `<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>${tailwindCSS}</style></head><body>${HTML}</body></html>`

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

@@ -16,7 +16,7 @@ const componentHelpers: ComponentHelper[] = [
     Turpis tincidunt id aliquet risus feugiat in ante. Tincidunt dui ut ornare lectus sit. Ipsum dolor sit amet consectetur. Viverra ipsum nunc aliquet bibendum enim facilisis gravida neque convallis.<br><br>Dignissim sodales ut eu sem integer vitae justo eget magna. 
     Ac turpis egestas maecenas pharetra convallis. Mauris sit amet massa vitae. Ut tellus elementum sagittis vitae et. Sed risus ultricies tristique nulla aliquet enim tortor. Nunc mattis enim ut tellus elementum sagittis vitae et leo. Quis vel eros donec ac odio tempor. 
     Faucibus scelerisque eleifend donec pretium. <br><br>Adipiscing bibendum est ultricies integer quis auctor elit. Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed felis eget. Gravida dictum fusce ut placerat orci nulla. 
-    Consequat mauris nunc congue nisi vitae suscipit tellus mauris. <br><br></p><p><strong>List</strong></p><ul><li><p>Integer enim neque volutpat ac tincidunt vitae semper quis. Sit amet consectetur adipiscing elit pellentesque.</p></li><li><p>Urna cursus eget nunc scelerisque viverra. 
+    Sunt in culpa qui officia deserunt nisi vitae suscipit tellus mauris. <br><br></p><p><strong>List</strong></p><ul><li><p>Integer enim neque volutpat ac tincidunt vitae semper quis. Sit amet consectetur adipiscing elit pellentesque.</p></li><li><p>Urna cursus eget nunc scelerisque viverra. 
     Cursus metus aliquam eleifend mi in nulla posuere. Lobortis elementum nibh tellus molestie nunc non blandit massa.</p></li><li><p>Sodales ut eu sem integer vitae justo eget magna. Scelerisque felis imperdiet proin fermentum leo vel orci. Nunc id cursus metus aliquam eleifend.</p></li></ul>
     </div>
     </div>
@@ -31,7 +31,7 @@ const componentHelpers: ComponentHelper[] = [
     `,
   },
   {
-    html_code: `<section><div class="relative py-4"><div class="mx-auto max-w-7xl lg:px-4 px-2"><div class="break-words"><h2>Consequat mauris nunc congue</h2></div></div></div></section>`,
+    html_code: `<section><div class="relative py-4"><div class="mx-auto max-w-7xl lg:px-4 px-2"><div class="break-words"><h2>Sunt in culpa qui officia deserunt</h2></div></div></div></section>`,
     id: null,
     title: 'Header H2',
     icon: `
@@ -41,7 +41,7 @@ const componentHelpers: ComponentHelper[] = [
     `,
   },
   {
-    html_code: `<section><div class="relative py-4"><div class="mx-auto max-w-7xl lg:px-4 px-2"><div class="break-words"><h3>Consequat mauris nunc congue</h3></div></div></div></section>`,
+    html_code: `<section><div class="relative py-4"><div class="mx-auto max-w-7xl lg:px-4 px-2"><div class="break-words"><h3>Sunt in culpa qui officia deserunt</h3></div></div></div></section>`,
     id: null,
     title: 'Header H3',
     icon: `

package/src/composables/isObject.ts

@@ -1,6 +0,0 @@
-export const isObject = function (data: unknown): data is Record<string, unknown> {
-  if (typeof data === 'object' && !Array.isArray(data) && data !== null) {
-    return true
-  }
-  return false
-}

package/src/composables/usePromise.ts

@@ -1,10 +0,0 @@
-export const usePromise = function (time: number): Promise<() => void> {
-  // new promise
-  return new Promise((resolve) => {
-    return setTimeout(() => {
-      resolve(() => {
-        return
-      })
-    }, time)
-  })
-}

package/src/composables/vueFetch.ts

@@ -1,278 +0,0 @@
-import { ref } from 'vue'
-import type { Ref } from 'vue'
-import { usePromise } from '@/composables/usePromise'
-import { isObject } from '@/composables/isObject'
-
-// Type definitions
-interface CustomFetchOptions {
-  abortTimeoutTime?: number
-  additionalCallTime?: number
-}
-
-interface VueFetchReturn {
-  isSuccess: Ref<boolean>
-  isLoading: Ref<boolean>
-  isError: Ref<boolean>
-  error: Ref<string | null>
-  errors: Ref<unknown>
-  handleData: (
-    url: string,
-    fetchOptions?: RequestInit,
-    customFetchOptions?: CustomFetchOptions,
-  ) => Promise<unknown>
-  fetchedData: Ref<unknown>
-}
-
-export const vueFetch = function vueFetch(): VueFetchReturn {
-  // Initializing state management references
-  const isSuccess: Ref<boolean> = ref(false)
-  const isLoading: Ref<boolean> = ref(false)
-  const isError: Ref<boolean> = ref(false)
-  const error: Ref<string | null> = ref(null)
-  const errors: Ref<unknown> = ref(null)
-  const goDirectToError: Ref<boolean> = ref(false)
-  const fetchedData: Ref<unknown> = ref(null)
-  const streamAlreadyRead: Ref<boolean | null> = ref(null)
-  const response: Ref<Response | null> = ref(null)
-
-  const additionalTime: Ref<number | null> = ref(null)
-  const abortTimeout: Ref<number | null> = ref(null)
-
-  // Function to handle data fetching and state updates
-  const handleData = async function (
-    url: string,
-    fetchOptions: RequestInit = {},
-    customFetchOptions: CustomFetchOptions = {},
-  ): Promise<unknown> {
-    isSuccess.value = false
-    isLoading.value = false
-    isError.value = false
-    error.value = null
-    errors.value = null
-    goDirectToError.value = false
-    fetchedData.value = null
-    streamAlreadyRead.value = null
-    response.value = null
-
-    // Initialize or set timeout and additional time values
-    abortTimeout.value = customFetchOptions.abortTimeoutTime ?? 4000
-    additionalTime.value = customFetchOptions.additionalCallTime ?? 0
-
-    // Initializing fetch operation control parameters
-    const controller = new AbortController()
-
-    // Abort fetch operation after the specified timeout
-    const timer = setTimeout(() => {
-      controller.abort()
-    }, abortTimeout.value)
-
-    try {
-      // Begin fetch operation
-      isLoading.value = true
-      const promise = usePromise(additionalTime.value)
-      await promise
-
-      // Check for abort signal and handle accordingly
-      if (controller.signal.aborted) {
-        clearTimeout(timer)
-        isLoading.value = false
-        isError.value = false
-        goDirectToError.value = true
-
-        throw new Error('Error 500. Loading time exceeded.')
-      }
-
-      // Fetch and handle response
-      response.value = await fetch(url, {
-        ...fetchOptions,
-        signal: controller.signal,
-      })
-
-      // Check if the fetch request was successful. If not, throw an error
-      if (response.value.status !== 200 && response.value.status !== 201) {
-        throw new Error(`${response.value.status}. ${response.value.statusText}`)
-      }
-
-      // Parse JSON response when content-type is 'application/json'
-      const contentType = response.value.headers.get('content-type') || ''
-
-      // Content-Type 'application/json'
-      if (contentType.includes('application/json')) {
-        streamAlreadyRead.value = true
-        clearTimeout(timer)
-        isSuccess.value = true
-        isLoading.value = false
-        isError.value = false
-
-        fetchedData.value = await response.value.json()
-        return fetchedData.value
-      }
-
-      // Content-Type 'text/plain' or 'text/html'
-      if (contentType.includes('text/plain') || contentType.includes('text/html')) {
-        streamAlreadyRead.value = true
-        clearTimeout(timer)
-        isSuccess.value = true
-        isLoading.value = false
-        isError.value = false
-
-        fetchedData.value = await response.value.text()
-        return fetchedData.value
-      }
-
-      // Handle non-GET requests without 'application/json', 'text/plain' or 'text/html'
-      if (
-        fetchOptions?.method !== 'GET' &&
-        fetchOptions?.method !== 'get' &&
-        fetchOptions?.method !== undefined
-      ) {
-        clearTimeout(timer)
-        isSuccess.value = true
-        isLoading.value = false
-        isError.value = false
-        fetchedData.value = 'Your request was processed successfully.'
-        return 'Your request was processed successfully.'
-      }
-
-      // Handle GET requests without 'application/json' content-type
-      clearTimeout(timer)
-      isSuccess.value = true
-      isLoading.value = false
-      isError.value = false
-      goDirectToError.value = true
-      throw new Error(
-        "Error 500. The request header must contain 'application/json', 'text/plain' or 'text/html'",
-      )
-    } catch (err: unknown) {
-      clearTimeout(timer)
-      isSuccess.value = false
-      isLoading.value = false
-
-      // Set default error message
-      isError.value = true
-      const errorMessage = err instanceof Error ? err.message : String(err)
-      error.value = `Not able to fetch data. Error status: ${errorMessage}.`
-
-      if (response.value) {
-        // Get content type of the response
-        const contentType = response.value.headers.get('content-type') || ''
-
-        if (contentType.includes('application/json') && !streamAlreadyRead.value) {
-          // Handle errors when content type is 'application/json'
-          if (goDirectToError.value !== true) {
-            try {
-              // Parse the response body as JSON
-              const collectingErrorsJson = await response.value.json()
-
-              // Collect backend form validation errors
-              errors.value = collectingErrorsJson
-
-              // Handle different types of error messages
-
-              // If the error message is a string, handle it accordingly
-              if (typeof collectingErrorsJson === 'string') {
-                // Set error message when error body is a string
-                isError.value = true
-                error.value = `Not able to fetch data. Error status: ${errorMessage}. ${collectingErrorsJson}`
-              }
-              // If the error message is an array, handle it accordingly
-              else if (Array.isArray(collectingErrorsJson)) {
-                // Set error message when error body is an array
-                isError.value = true
-                error.value = `Not able to fetch data. Error status: ${errorMessage}. ${collectingErrorsJson.join(' ')}`
-              }
-              // If the error message is an object, handle it accordingly
-              else if (isObject(collectingErrorsJson)) {
-                const errorsKeys = Object.keys(collectingErrorsJson)
-                const errorsValues = Object.values(collectingErrorsJson)
-
-                // If there are no errors, handle it accordingly
-                if (errorsKeys.length === 0) {
-                  // Set error message when error body is an empty object
-                  isError.value = true
-                  error.value = `Not able to fetch data. Error status: ${response.value.status}.`
-                }
-
-                // If there are errors, handle them accordingly
-                if (errorsKeys.length > 0) {
-                  for (let i = 0; i < errorsKeys.length; i++) {
-                    if (Array.isArray(errorsValues[i]) || isObject(errorsValues[i])) {
-                      // Set error message when encountering a nested object or array
-                      isError.value = true
-                      error.value = `Not able to fetch data. Error status: ${errorMessage}`
-                      break
-                    }
-
-                    // If the error is neither an array nor an object, handle it accordingly
-                    if (!Array.isArray(errorsValues[i]) && !isObject(errorsValues[i])) {
-                      const errorObjToString = Object.values(collectingErrorsJson).join(' ')
-                      // Set error message when error body is a flat object
-                      isError.value = true
-                      error.value = `Not able to fetch data. Error status: ${errorMessage}. ${errorObjToString}`
-                    }
-                  }
-                }
-              }
-            } catch {
-              // Handle JSON parsing error
-              error.value = `Not able to fetch data. Error status: ${errorMessage}`
-            }
-          }
-        }
-
-        // If the response's Content-Type text/plain, handle it accordingly
-        if (contentType.includes('text/plain') && !streamAlreadyRead.value) {
-          try {
-            const plainText = await response.value.text()
-            // Remove HTML tags using a regular expression
-            const cleanedText = plainText.replace(/<\/?[^>]+(>|$)/g, '')
-            error.value = `Error: ${cleanedText}`
-          } catch {
-            // Handle text parsing error
-            error.value = `Not able to fetch data. Error status: ${errorMessage}`
-          }
-        }
-
-        // If the response's Content-Type text/html, handle it accordingly
-        if (contentType.includes('text/html') && !streamAlreadyRead.value) {
-          try {
-            const htmlContent = await response.value.text()
-            // Remove HTML tags using a regular expression
-            const cleanedText = htmlContent.replace(/<\/?[^>]+(>|$)/g, '')
-            error.value = `Error: ${cleanedText}`
-          } catch {
-            // Handle HTML parsing error
-            error.value = `Not able to fetch data. Error status: ${errorMessage}`
-          }
-        }
-
-        if (
-          (!contentType.includes('application/json') &&
-            !contentType.includes('text/plain') &&
-            !contentType.includes('text/html')) ||
-          goDirectToError.value
-        ) {
-          isError.value = true
-          error.value = `Not able to fetch data. Error status: ${errorMessage}`
-        }
-
-        // Rethrow the error for further handling
-        throw err
-      }
-
-      // Rethrow the error if no response
-      throw err
-    }
-  }
-
-  // Return the state variables and the fetch function
-  return {
-    isSuccess,
-    isLoading,
-    isError,
-    error,
-    errors,
-    handleData,
-    fetchedData,
-  }
-}