@myissue/vue-website-page-builder 3.2.91 → 3.2.93

package/src/css/dev-global.css

@@ -14,8 +14,15 @@ These styles affect all HTML elements (like input, button, h1, etc.) in the cons
 }
 /* CSS for content inside page builder # start */
 #page-builder-editor .tiptap {
+  outline: none !important;
+  box-shadow: none !important;
   background: #fff;
   min-height: 25rem;
+  border: 1px solid #aaa;
+  border-radius: 10px;
+  padding: 6px;
+  margin-bottom: 20px;
+  padding-bottom: 100px;
 }
 
 #pagebuilder #youtube-video::before {

package/src/index.ts

@@ -5,8 +5,6 @@ export { default as Preview } from './PageBuilder/Preview.vue'
 // Export stores (consolidated into single store)
 export { usePageBuilderStateStore } from './stores/page-builder-state'
 
-export { default as PageBuilderClass } from './composables/PageBuilderClass.ts'
-
 // Export composables
 export { usePageBuilderModal } from './composables/usePageBuilderModal'
 
@@ -21,3 +19,7 @@ import './css/app.css'
 
 // Export shared store instances for external access
 export { sharedPageBuilderPinia, sharedPageBuilderStore } from './stores/shared-store'
+
+// export { PageBuilderService } from './composables/PageBuilderService.ts'
+
+export { initPageBuilder, getPageBuilder } from './composables/builderInstance'

package/src/main.ts

@@ -1,10 +1,13 @@
 import './css/dev-global.css'
 import './css/app.css'
+import { initPageBuilder } from './composables/builderInstance'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
 
+initPageBuilder()
+
 const app = createApp(App)
 
 app.use(createPinia())

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

@@ -56,11 +56,16 @@ interface PageBuilderState {
   configPageBuilder: PageBuilderConfig | null
 
   // Media Library State
-  currentImage: ImageObject
+  applyImageToSelection: ImageObject
   currentPreviewImage: string | null
 
   // User State
+  builderStarted: boolean
+  isLoadingGlobal: boolean
   isSaving: boolean
+  hasLocalDraftForUpdate: boolean
+  isResumeEditing: boolean
+  isRestoring: boolean
 }
 
 export const usePageBuilderStateStore = defineStore('pageBuilderState', {
@@ -112,11 +117,16 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     configPageBuilder: null,
 
     // Media Library State
-    currentImage: { src: '' },
+    applyImageToSelection: { src: '' },
     currentPreviewImage: null,
 
     // User State
+    builderStarted: false,
+    isLoadingGlobal: false,
     isSaving: false,
+    hasLocalDraftForUpdate: false,
+    isResumeEditing: false,
+    isRestoring: false,
   }),
   getters: {
     // Core Page Builder Getters
@@ -250,20 +260,25 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
       return state.basePrimaryImage
     },
 
-    getConfigPageBuilder(state: PageBuilderState): PageBuilderConfig | null {
+    getPageBuilderConfig(state: PageBuilderState): PageBuilderConfig | null {
       return state.configPageBuilder
     },
 
-    // Media Library Getters
-    getCurrentImage(state: PageBuilderState): ImageObject {
-      return state.currentImage
+    getApplyImageToSelection(state: PageBuilderState): ImageObject {
+      return state.applyImageToSelection
     },
+
     getCurrentPreviewImage(state: PageBuilderState): string | null {
       return state.currentPreviewImage
     },
 
     // User Getters
+    getBuilderStarted: (state: PageBuilderState): boolean => state.builderStarted,
+    getIsLoadingGlobal: (state: PageBuilderState): boolean => state.isLoadingGlobal,
     getIsSaving: (state: PageBuilderState): boolean => state.isSaving,
+    getHasLocalDraftForUpdate: (state: PageBuilderState): boolean => state.hasLocalDraftForUpdate,
+    getIsResumeEditing: (state: PageBuilderState): boolean => state.isResumeEditing,
+    getIsRestoring: (state: PageBuilderState): boolean => state.isRestoring,
   },
   actions: {
     setComponentArrayAddMethod(payload: string | null): void {
@@ -436,21 +451,35 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
       localStorage.setItem('preview', payload)
     },
 
-    applyPageBuilderConfig(payload: PageBuilderConfig | null): void {
+    setPageBuilderConfig(payload: PageBuilderConfig | null): void {
       this.configPageBuilder = payload
     },
 
-    // Media Library Actions
-    setCurrentImage(payload: ImageObject): void {
-      this.currentImage = payload
+    setApplyImageToSelection(payload: ImageObject): void {
+      this.applyImageToSelection = payload
     },
     setCurrentPreviewImage(payload: string | null): void {
       this.currentPreviewImage = payload
     },
 
     // User Actions
+    setBuilderStarted(payload: boolean): void {
+      this.builderStarted = payload
+    },
+    setIsLoadingGlobal(payload: boolean): void {
+      this.isLoadingGlobal = payload
+    },
     setIsSaving(payload: boolean): void {
       this.isSaving = payload
     },
+    setHasLocalDraftForUpdate(payload: boolean): void {
+      this.hasLocalDraftForUpdate = payload
+    },
+    setIsResumeEditing(payload: boolean): void {
+      this.isResumeEditing = payload
+    },
+    setIsRestoring(payload: boolean): void {
+      this.isRestoring = payload
+    },
   },
 })

package/src/types/index.ts

@@ -1,8 +1,8 @@
-import type PageBuilderClass from '../composables/PageBuilderClass.ts'
+import type PageBuilderService from '../composables/PageBuilderService.ts'
 
 export interface PageBuilderState {
   // ...other state properties...
-  pageBuilderClass: PageBuilderClass | null
+  PageBuilderService: PageBuilderService | null
   isSaving: boolean
   // etc.
 }
@@ -83,13 +83,103 @@ export interface PageBuilderStateStore {
   setTextColor: (color: string) => void
   setBackgroundOpacity: (opacity: string) => void
   setOpacity: (opacity: string) => void
-  getCurrentImage: ImageObject | null
+  getApplyImageToSelection: ImageObject | null
   setCurrentImage: (image: ImageObject) => void
   getCurrentPreviewImage: string | null
   setCurrentPreviewImage: (url: string | null) => void
   [key: string]: unknown
 }
 
+export type FormName =
+  // --- Content ---
+  | 'post'
+  | 'article'
+  | 'blog'
+  | 'news'
+  | 'page'
+  | 'faq'
+  | 'testimonial'
+  | 'case-study'
+  | 'press-release'
+
+  // --- Commerce ---
+  | 'product'
+  | 'products'
+  | 'category'
+  | 'collection'
+  | 'brand'
+  | 'coupon'
+  | 'discount'
+  | 'shop'
+  | 'cart'
+  | 'checkout'
+
+  // --- User / Team ---
+  | 'profile'
+  | 'account'
+  | 'team'
+  | 'team-member'
+  | 'author'
+  | 'customer'
+  | 'user'
+
+  // --- Business / Services ---
+  | 'service'
+  | 'services'
+  | 'package'
+  | 'plan'
+  | 'pricing'
+  | 'subscription'
+
+  // --- Job / Careers ---
+  | 'job'
+  | 'job-listing'
+  | 'career'
+  | 'applicant'
+
+  // --- Events / Scheduling ---
+  | 'event'
+  | 'events'
+  | 'webinar'
+  | 'appointment'
+  | 'reservation'
+  | 'schedule'
+
+  // --- Directory / Listings ---
+  | 'listing'
+  | 'directory'
+  | 'location'
+  | 'vendor'
+  | 'company'
+
+  // --- Media ---
+  | 'gallery'
+  | 'image'
+  | 'video'
+  | 'media'
+  | 'audio'
+  | 'file'
+
+  // --- Support / Feedback ---
+  | 'contact'
+  | 'support'
+  | 'ticket'
+  | 'feedback'
+  | 'review'
+  | 'inquiry'
+  | 'report'
+
+  // --- Misc ---
+  | 'setting'
+  | 'configuration'
+  | 'integration'
+  | 'theme'
+  | 'language'
+  | 'menu'
+  | 'navigation'
+  | 'tag'
+  | 'meta'
+
 // User interfaces
 export interface User {
   name: string
@@ -103,22 +193,22 @@ export interface PageBuilderUser {
 
 // Page Builder Configuration interface
 export interface PageBuilderConfig {
-  updateOrCreate?: {
+  updateOrCreate: {
     formType: 'create' | 'update'
-    formName?: string
+    formName: FormName
   }
   pageBuilderLogo?: { src: string } | null
-  resourceData?: { title: string; id: number } | null
+  resourceData?: { title: string; id?: number } | null
   userForPageBuilder?: { name: string } | null
   [key: string]: unknown
   userSettings?: {
-    theme: 'light' | 'dark' | 'auto'
-    language: string
-    autoSave: boolean
+    theme?: 'light' | 'dark' | 'auto'
+    language?: string
+    autoSave?: boolean
     [key: string]: unknown
   } | null
   settings?: {
-    brandColor: string
+    brandColor?: string
     [key: string]: unknown
   } | null
 }

package/src/helpers/passedPageBuilderConfig.ts

@@ -1,71 +0,0 @@
-import type { PageBuilderConfig } from '../types'
-import { sharedPageBuilderStore } from '../stores/shared-store'
-import PageBuilderClass from '../composables/PageBuilderClass.ts'
-import { isEmptyObject } from './isEmptyObject.ts'
-
-const pageBuilderStateStore = sharedPageBuilderStore
-
-// Initialize PageBuilder with store
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
-
-export const updateOrCreateIsFalsy = function (config: PageBuilderConfig) {
-  // Case A: updateOrCreate is missing, not an object, has an invalid formType, or is an empty object
-  if (
-    !config.updateOrCreate ||
-    (config.updateOrCreate && typeof config.updateOrCreate.formType !== 'string') ||
-    (config.updateOrCreate && isEmptyObject(config.updateOrCreate))
-  ) {
-    const updatedConfig = {
-      ...config,
-      updateOrCreate: {
-        formType: 'create' as 'create',
-        formName: 'post',
-      },
-    }
-
-    pageBuilderClass.applyPageBuilderConfig(updatedConfig)
-    return true
-  }
-
-  // Case B: formType exists but is not 'create' or 'update', and formName is missing or invalid
-  if (
-    config.updateOrCreate &&
-    typeof config.updateOrCreate.formType === 'string' &&
-    config.updateOrCreate.formType !== 'create' &&
-    config.updateOrCreate.formType !== 'update' &&
-    typeof config.formName !== 'string'
-  ) {
-    const updatedConfig = {
-      ...config,
-      updateOrCreate: {
-        formType: 'create',
-        formName: 'post',
-      },
-    } as const
-
-    pageBuilderClass.applyPageBuilderConfig(updatedConfig)
-    return true
-  }
-
-  // Case C: formType is valid ('create' or 'update'), but formName is missing or an empty string
-  if (
-    (config.updateOrCreate &&
-      typeof config.updateOrCreate.formType === 'string' &&
-      (config.updateOrCreate.formType === 'create' ||
-        config.updateOrCreate.formType === 'update') &&
-      typeof config.updateOrCreate.formName !== 'string') ||
-    (typeof config.updateOrCreate.formName === 'string' &&
-      config.updateOrCreate.formName.length === 0)
-  ) {
-    const updatedConfig = {
-      ...config,
-      updateOrCreate: {
-        formType: config.updateOrCreate.formType,
-        formName: 'post',
-      },
-    }
-
-    pageBuilderClass.applyPageBuilderConfig(updatedConfig)
-    return true
-  }
-}