@myissue/vue-website-page-builder 3.3.65 → 3.3.67

package/src/services/PageBuilderService.ts

@@ -7,6 +7,7 @@ import type {
   StartBuilderResult,
 } from '../types'
 import type { usePageBuilderStateStore } from '../stores/page-builder-state'
+// import { i18n } from '../i18n' // i18n is now async and must be passed in, not imported
 
 import tailwindFontSizes from '../utils/builder/tailwind-font-sizes'
 import tailwindColors from '../utils/builder/tailwaind-colors'
@@ -22,7 +23,36 @@ import { delay } from '../composables/delay'
 import { isEmptyObject } from '../helpers/isEmptyObject'
 import { extractCleanHTMLFromPageBuilder } from '../composables/extractCleanHTMLFromPageBuilder'
 
+// Define available languages as a type and an array for easy iteration and type safety
+export type AvailableLanguage =
+  | 'en'
+  | 'zh-Hans'
+  | 'fr'
+  | 'ja'
+  | 'ru'
+  | 'es'
+  | 'pt'
+  | 'de'
+  | 'ar'
+  | 'hi'
+
+export const AVAILABLE_LANGUAGES: AvailableLanguage[] = [
+  'en',
+  'zh-Hans',
+  'fr',
+  'ja',
+  'ru',
+  'es',
+  'pt',
+  'de',
+  'ar',
+  'hi',
+]
+
+import type { I18n } from 'vue-i18n'
+
 export class PageBuilderService {
+  private i18n: I18n
   // Class properties with types
   private fontSizeRegex =
     /^(sm:|md:|lg:|xl:|2xl:)?pbx-text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/
@@ -47,7 +77,8 @@ export class PageBuilderService {
   private pendingMountComponents: BuilderResourceData | null = null
   private isPageBuilderMissingOnStart: boolean = false
 
-  constructor(pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>) {
+  constructor(pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>, i18n: I18n) {
+    this.i18n = i18n
     this.hasStartedEditing = false
     this.pageBuilderStateStore = pageBuilderStateStore
     this.getApplyImageToSelection = computed(
@@ -100,6 +131,9 @@ export class PageBuilderService {
     ]
   }
 
+  public availableLanguage(): AvailableLanguage[] {
+    return AVAILABLE_LANGUAGES
+  }
   // Deselect any selected or hovered elements in the builder UI
   async clearHtmlSelection(): Promise<void> {
     this.pageBuilderStateStore.setComponent(null)
@@ -235,6 +269,55 @@ export class PageBuilderService {
     return
   }
 
+  private ensureLanguage(config: PageBuilderConfig): void {
+    // Set default language config if missing, empty, or language missing/empty
+    const defaultLang = 'en'
+    const defaultEnable = ['en', 'zh-Hans', 'fr', 'ja', 'ru', 'es', 'pt', 'de', 'ar', 'hi'] as const
+
+    let needsDefault = false
+    const userSettings = config.userSettings
+    const language = userSettings && userSettings.language
+
+    if (!userSettings || isEmptyObject(userSettings)) {
+      needsDefault = true
+    } else if (!language || isEmptyObject(language)) {
+      needsDefault = true
+    }
+
+    if (needsDefault) {
+      const updatedLanguage = {
+        ...config,
+        userSettings: {
+          ...userSettings,
+          language: {
+            default: defaultLang,
+            enable: defaultEnable as typeof defaultEnable,
+          },
+        },
+      } as const
+      this.pageBuilderStateStore.setPageBuilderConfig(updatedLanguage)
+      return
+    }
+
+    // Ensure default is in enable array
+    if (language && Array.isArray(language.enable) && language.default) {
+      if (!language.enable.includes(language.default)) {
+        const updatedEnable = [...language.enable, language.default]
+        const updatedLanguage = {
+          ...config,
+          userSettings: {
+            ...userSettings,
+            language: {
+              ...language,
+              enable: updatedEnable,
+            },
+          },
+        } as const
+        this.pageBuilderStateStore.setPageBuilderConfig(updatedLanguage)
+      }
+    }
+  }
+
   private validateConfig(config: PageBuilderConfig): void {
     const defaultConfigValues = {
       updateOrCreate: {
@@ -251,6 +334,52 @@ export class PageBuilderService {
     if (config && Object.keys(config).length !== 0 && config.constructor === Object) {
       this.ensureUpdateOrCreateConfig(config)
     }
+
+    this.ensureLanguage(config)
+  }
+
+  public saveBuilderConfigToLocalStorage(specificConfig: PageBuilderConfig) {
+    // Only save userSettings to localStorage
+    if (specificConfig && specificConfig.userSettings) {
+      localStorage.setItem(
+        'pageBuilderConfig',
+        JSON.stringify({ userSettings: specificConfig.userSettings }),
+      )
+    }
+  }
+
+  private checkBuilderConfigToLocalStorage(currentConfig: PageBuilderConfig) {
+    const savedConfigRaw = localStorage.getItem('pageBuilderConfig')
+
+    if (savedConfigRaw) {
+      try {
+        const savedConfig = JSON.parse(savedConfigRaw)
+        // Deep merge: prefer all keys from savedConfig, fallback to currentConfig
+        const mergedConfig = {
+          ...currentConfig,
+          ...savedConfig,
+          userSettings: {
+            ...currentConfig.userSettings,
+            ...savedConfig.userSettings,
+          },
+        }
+
+        this.pageBuilderStateStore.setPageBuilderConfig(mergedConfig)
+
+        const saveLang =
+          this.pageBuilderStateStore.getPageBuilderConfig &&
+          this.pageBuilderStateStore.getPageBuilderConfig.userSettings &&
+          this.pageBuilderStateStore.getPageBuilderConfig.userSettings.language &&
+          this.pageBuilderStateStore.getPageBuilderConfig.userSettings.language.default
+
+        if (saveLang) {
+          this.i18n.global.locale = saveLang
+        }
+        return
+      } catch (e) {
+        console.warn('Failed to parse saved pageBuilderConfig from localStorage:', e)
+      }
+    }
   }
 
   /**
@@ -271,6 +400,7 @@ export class PageBuilderService {
     // Prevents builder actions to prevent errors caused by missing DOM .
     this.pageBuilderStateStore.setBuilderStarted(true)
     const pagebuilder = document.querySelector('#pagebuilder')
+
     let validation
     try {
       this.originalComponents = passedComponentsArray
@@ -278,6 +408,20 @@ export class PageBuilderService {
       // Validate and normalize the config (ensure required fields are present)
       this.validateConfig(config)
 
+      if (
+        this.pageBuilderStateStore.getPageBuilderConfig &&
+        this.pageBuilderStateStore.getPageBuilderConfig.userSettings &&
+        this.pageBuilderStateStore.getPageBuilderConfig.userSettings.language &&
+        this.pageBuilderStateStore.getPageBuilderConfig.userSettings.language.default
+      ) {
+        this.i18n.global.locale =
+          this.pageBuilderStateStore.getPageBuilderConfig.userSettings.language.default
+      }
+
+      if (this.pageBuilderStateStore.getPageBuilderConfig) {
+        this.checkBuilderConfigToLocalStorage(this.pageBuilderStateStore.getPageBuilderConfig)
+      }
+
       validation = this.validateUserProvidedComponents(passedComponentsArray)
 
       // Update the localStorage key name based on the config/resource
@@ -405,7 +549,7 @@ export class PageBuilderService {
         }
 
         if (!passedComponentsArray && !localStorageData && this.isPageBuilderMissingOnStart) {
-          console.log('10000:', internalPageBuilderCall)
+          console.log('XXXX:', internalPageBuilderCall)
           await this.completeMountProcess(JSON.stringify(this.pendingMountComponents), true)
           this.saveDomComponentsToLocalStorage()
           return
@@ -769,33 +913,11 @@ export class PageBuilderService {
 
   public handleManualSave = async () => {
     this.startEditing()
-    const passedConfig = this.pageBuilderStateStore.getPageBuilderConfig
-
-    // Check if config is set
-    if (passedConfig && passedConfig.userSettings) {
-      //
-      //
-      // Enabled auto save
-      if (
-        (typeof passedConfig.userSettings.autoSave === 'boolean' &&
-          !passedConfig.userSettings.autoSave) ||
-        (typeof passedConfig.userSettings.autoSave === 'boolean' &&
-          passedConfig.userSettings.autoSave)
-      ) {
-        this.pageBuilderStateStore.setIsSaving(true)
-        this.saveDomComponentsToLocalStorage()
-        await delay(400)
 
-        this.pageBuilderStateStore.setIsSaving(false)
-      }
-    }
-    if (passedConfig && !passedConfig.userSettings) {
-      this.pageBuilderStateStore.setIsSaving(true)
-      this.saveDomComponentsToLocalStorage()
-      await delay(400)
-
-      this.pageBuilderStateStore.setIsSaving(false)
-    }
+    this.pageBuilderStateStore.setIsSaving(true)
+    this.saveDomComponentsToLocalStorage()
+    await delay(400)
+    this.pageBuilderStateStore.setIsSaving(false)
   }
 
   public cloneCompObjForDOMInsertion(componentObject: ComponentObject): ComponentObject {
@@ -921,7 +1043,6 @@ export class PageBuilderService {
   }
 
   public handleRemoveStyle(property: string): void {
-    console.log('come her:', property)
     const element = this.getElement.value
     if (!element || !property) return
 

package/src/tests/PageBuilderTest.vue

@@ -6,61 +6,31 @@ import DemoBuilderComponentsTest from '../tests/TestComponents/DemoBuilderCompon
 import { onMounted } from 'vue'
 import componentsArray from '../tests/componentsArray.test.json'
 import { getPageBuilder } from '../composables/builderInstance'
+import { useI18n } from 'vue-i18n'
 const pageBuilderService = getPageBuilder()
+const { t } = useI18n()
 
 const features = [
-  {
-    name: 'Live Drag & Drop Builder',
-    description:
-      'Click & Drop content on a page and watch your pages come to life. Bring your vision to life and create impressive pages using a click & drop Page Builder',
-  },
-  {
-    name: 'True Visual Editing',
-    description:
-      'See your changes in real-time as you make them. Elevate your creative vision and create pages using an intuitive click & drop page builder. Break free from design limitations and turn your visions into reality.',
-  },
-  {
-    name: 'Features',
-    description:
-      'Click & Drop, Reordering, True Visual Editing, Responsive Editing, Font Customization, Undo & Redo, Text Editing, Media Library, Unsplash Integration, YouTube Videos.',
-  },
-  {
-    name: 'Technologies',
-    description:
-      'Developed with TypeScript, Vue 3, Composition API, Pinia, CSS, Tailwind CSS and HTML.',
-  },
-  {
-    name: 'Set Brand and Link Colors one place',
-    description:
-      'Global Styles for fonts, designs, & colors. Set Brand and Link Colors once and apply them across the entire Platform with ease.',
-  },
-  {
-    name: 'Mobile-First Approach',
-    description:
-      'Developed with Mobile-First approach. The Page Builder even works on mobile phones.',
-  },
-  {
-    name: 'Media Library',
-    description:
-      'A beautiful and user-friendly media library that allows you to change and update images. Unsplash Integration is included.',
-  },
-  {
-    name: 'Minimal and Intuitive Design',
-    description:
-      'Beautiful, elegant and intuitive design. Enhance user engagement with amazing visual experience.',
-  },
+  { key: 'liveDragDropBuilder' },
+  { key: 'trueVisualEditing' },
+  { key: 'features' },
+  { key: 'technologies' },
+  { key: 'setBrandAndLinkColors' },
+  { key: 'mobileFirstApproach' },
+  { key: 'mediaLibrary' },
+  { key: 'minimalIntuitiveDesign' },
 ]
 
 const publishPageBuilder = function () {}
 
 // Convert componentsArray to HTML string
 const htmlString =
-  '<div id="pagebuilder" class="bg-yellow-200 border-radius-full pb-6" style="">' +
+  '<div id="pagebuilder" class="" style="">' +
   componentsArray.map((c) => c.html_code).join('\n') +
   '</div>'
 
 // Parse as HTML (not JSON)
-const { components, pageSettings } = pageBuilderService.parsePageBuilderHTML(htmlString)
+const { /* components, */ pageSettings } = pageBuilderService.parsePageBuilderHTML(htmlString)
 
 const configPageBuilder = {
   userForPageBuilder: {
@@ -80,7 +50,11 @@ const configPageBuilder = {
   },
   userSettings: {
     theme: 'light',
-    language: 'en',
+    language: {
+      default: 'en',
+      enable: ['en', 'zh-Hans', 'fr', 'ja', 'ru', 'es', 'pt', 'de', 'ar', 'hi'],
+      disableLanguageDropDown: false,
+    },
     autoSave: true,
   },
   settings: {
@@ -90,7 +64,7 @@ const configPageBuilder = {
 } as const
 
 onMounted(async () => {
-  const result = await pageBuilderService.startBuilder(configPageBuilder, components)
+  const result = await pageBuilderService.startBuilder(configPageBuilder)
   console.log('Page Builder inspect the result for message, status, or error::', result)
 })
 </script>
@@ -100,19 +74,15 @@ onMounted(async () => {
     <div class="pbx-myPrimaryWidthScreenModule pbx-bg-red-50 lg:pbx-block">
       <div class="pbx-myPrimaryContentSection">
         <h2 class="pbx-mySecondaryHeader">
-          Bring your vision to life and create impressive pages using a click & drop Page Builder
+          {{ $t('branding.mainHeader') }}
         </h2>
         <p class="pbx-myPrimaryParagraph pbx-font-normal">
-          The web builder for stunning pages. Enable users to design and publish modern pages at any
-          scale. Build responsive pages like listings, jobs or blog posts and manage content easily
-          using the free click & drop Page Builder. Developed with TypeScript, Vue 3, Composition
-          API, Pinia, CSS, Tailwind CSS and HTML.
-
+          {{ $t('branding.description') }}
           <br />
         </p>
         <div class="pbx-mt-4">
           <p class="pbx-myPrimaryParagraph pbx-font-normal">
-            Download or install our powerful, flexible, and easy-to-use free Vue 3 Page Builder via
+            {{ $t('branding.downloadDescription') }}
             <br />
             <strong> npm:</strong>
             <a
@@ -150,16 +120,16 @@ onMounted(async () => {
         >
           <div
             v-for="feature in features"
-            :key="feature.name"
+            :key="feature.key"
             class="pbx-bg-red-200 pbx-bg-opacity-20 hover:pbx-bg-opacity-10 pbx-w-full lg:pbx-min-h-[20rem] pbx-min-h-[12rem] pbx-relative pbx-col-span-1 pbx-flex pbx-flex-col pbx-text-center pbx-rounded-lg pbx-shadow-sm pbx-outline pbx-outline-2 pbx-outline-offset-8 pbx-outline-yellow-400"
           >
             <div
               class="pbx-bg-black/0 pbx-absolute pbx-top-0 pbx-left-0 pbx-w-full pbx-h-full pbx-rounded-lg"
             ></div>
             <div class="pbx-px-2 pbx-pt-8 pbx-absolute pbx-top-0 pbx-w-full">
-              <p class="pbx-myTertiaryHeader">{{ feature.name }}</p>
+              <p class="pbx-myTertiaryHeader">{{ t(`features.${feature.key}.name`) }}</p>
               <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-drop-shadow-sm">
-                {{ feature.description }}
+                {{ t(`features.${feature.key}.description`) }}
               </p>
             </div>
           </div>

package/src/tests/pageBuilderService.test.ts

@@ -47,7 +47,13 @@ describe('PageBuilderService', () => {
         typeof (fn as { mockClear?: () => void }).mockClear === 'function' &&
         (fn as { mockClear: () => void }).mockClear(),
     )
-    service = new PageBuilderService(mockStore)
+    // Provide a minimal i18n mock for tests
+    const mockI18n = {
+      global: {
+        locale: 'en',
+      },
+    } as any
+    service = new PageBuilderService(mockStore, mockI18n)
   })
 
   it('should start builder and return a success message', async () => {

package/src/types/index.ts

@@ -227,7 +227,13 @@ export interface PageBuilderConfig {
   [key: string]: unknown
   userSettings?: {
     theme?: 'light' | 'dark' | 'auto'
-    language?: string
+    language?: {
+      default: 'en' | 'zh-Hans' | 'fr' | 'ja' | 'ru' | 'es' | 'pt' | 'de' | 'ar' | 'hi'
+      enable?: ReadonlyArray<
+        'en' | 'zh-Hans' | 'fr' | 'ja' | 'ru' | 'es' | 'pt' | 'de' | 'ar' | 'hi'
+      >
+    }
+
     autoSave?: boolean
     [key: string]: unknown
   } | null