@myissue/vue-website-page-builder 3.3.68 → 3.3.71

package/src/PageBuilder/PageBuilder.vue

@@ -13,8 +13,6 @@ import { useDebounce } from '../composables/useDebounce.ts'
 import DynamicModalBuilder from '../Components/Modals/DynamicModalBuilder.vue'
 import GlobalLoader from '../Components/Loaders/GlobalLoader.vue'
 import { getPageBuilder } from '../composables/builderInstance'
-import { useI18n } from 'vue-i18n'
-
 const pageBuilderService = getPageBuilder()
 /**
  * Props for PageBuilder component
@@ -71,6 +69,10 @@ const closeAddComponentModal = () => {
 }
 provide('closeAddComponentModal', closeAddComponentModal)
 
+const getCurrentLanguage = computed(() => {
+  return pageBuilderStateStore.getCurrentLanguage
+})
+
 const getBuilderStarted = computed(() => {
   return pageBuilderStateStore.getBuilderStarted
 })
@@ -151,28 +153,6 @@ const getHasLocalDraftForUpdate = computed(() => {
   return pageBuilderStateStore.getHasLocalDraftForUpdate
 })
 
-const { locale } = useI18n()
-
-watch(locale, (newLocale) => {
-  const config = pageBuilderStateStore.getPageBuilderConfig
-  if (config && config.userSettings && config.userSettings.language) {
-    // Update the store with a full config (if you want to update the store)
-    const updatedConfig = {
-      ...config,
-      userSettings: {
-        ...config.userSettings,
-        language: {
-          ...config.userSettings.language,
-          default: newLocale,
-        },
-      },
-    }
-
-    pageBuilderStateStore.setPageBuilderConfig(updatedConfig)
-    pageBuilderService.saveBuilderConfigToLocalStorage(updatedConfig)
-  }
-})
-
 watch(getHasLocalDraftForUpdate, (newVal) => {
   if (newVal) {
     handlerRumeEditingForUpdate()
@@ -563,7 +543,7 @@ onMounted(async () => {
                   ></span>
                 </span>
               </div>
-              <div>{{ $t('button.save') }}</div>
+              <div>Save</div>
             </button>
             <!-- Save End -->
 
@@ -606,7 +586,7 @@ onMounted(async () => {
                   </span>
                 </div>
                 <div class="lg:pbx-block pbx-hidden">
-                  <span>{{ $t('button.resetPage') }}</span>
+                  <span> Reset Page </span>
                 </div>
               </button>
             </template>
@@ -643,9 +623,7 @@ onMounted(async () => {
                 class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2 pbx-border-gray-200"
               >
                 <span class="lg:pbx-block pbx-hidden">
-                  <div class="pbx-whitespace-nowrap pbx-cursor-pointer">
-                    {{ $t('button.addComponents') }}
-                  </div>
+                  <div class="pbx-whitespace-nowrap pbx-cursor-pointer">Add new Components</div>
                 </span>
                 <span
                   class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0"
@@ -724,62 +702,18 @@ onMounted(async () => {
                 }
               "
             >
-              {{ $t('button.publish') }}
+              Publish
             </button>
           </div>
         </template>
-        <!-- Select language -->
         <template
           v-if="
             getPageBuilderConfig &&
             getPageBuilderConfig.userSettings &&
-            getPageBuilderConfig.userSettings.language &&
-            !getPageBuilderConfig.userSettings.language.disableLanguageDropDown
+            getPageBuilderConfig.userSettings.language
           "
         >
-          <template
-            v-if="
-              getPageBuilderConfig &&
-              getPageBuilderConfig.userSettings &&
-              getPageBuilderConfig.userSettings.language
-            "
-          >
-            <div class="pbx-flex pbx-justify-center pbx-items-center pbx-ml-2">
-              <select
-                class="pbx-myPrimarySelect pbx-min-w-20 pbx-max-w-2pbx-min-w-20 pbx-w-max"
-                v-model="$i18n.locale"
-              >
-                <template
-                  v-if="
-                    Array.isArray(getPageBuilderConfig.userSettings.language.enable) &&
-                    getPageBuilderConfig.userSettings.language.enable.length >= 1
-                  "
-                >
-                  <template
-                    v-for="lang in pageBuilderService
-                      .availableLanguage()
-                      .filter((l) => getPageBuilderConfig.userSettings.language.enable.includes(l))"
-                    :key="lang"
-                  >
-                    <option :value="lang">{{ lang }}</option>
-                  </template>
-                </template>
-                <template
-                  v-if="
-                    !getPageBuilderConfig.userSettings.language.enable ||
-                    (Array.isArray(getPageBuilderConfig.userSettings.language.enable) &&
-                      getPageBuilderConfig.userSettings.language.enable.length === 0)
-                  "
-                >
-                  <template v-for="lang in pageBuilderService.availableLanguage()" :key="lang">
-                    <option :value="lang">{{ lang }}</option>
-                  </template>
-                </template>
-              </select>
-            </div>
-          </template>
         </template>
-
         <template v-if="showCloseButton">
           <div class="pbx-ml-2">
             <button
@@ -932,7 +866,7 @@ onMounted(async () => {
           class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2 pbx-cursor-pointer"
         >
           <span class="lg:pbx-block pbx-hidden">
-            <div class="pbx-whitespace-nowrap">{{ $t('button.addComponentsToBottom') }}</div>
+            <div class="pbx-whitespace-nowrap">Add to the bottom</div>
           </span>
           <div class="pbx-flex pbx-gap-2 pbx-items-center pbx-justify-center">
             <button

package/src/composables/builderInstance.ts

@@ -1,16 +1,15 @@
 // builderInstance.ts
 import { PageBuilderService } from '../services/PageBuilderService'
-import type { I18n } from 'vue-i18n'
 import { sharedPageBuilderStore } from '../stores/shared-store'
 
 // Singleton instance
 let instance: PageBuilderService | null = null
 
 // Used to create and store the single instance
-export function initPageBuilder(i18n: I18n): PageBuilderService {
+export function initPageBuilder(): PageBuilderService {
   if (!instance) {
     const pageBuilderStateStore = sharedPageBuilderStore
-    instance = new PageBuilderService(pageBuilderStateStore, i18n)
+    instance = new PageBuilderService(pageBuilderStateStore)
   }
   return instance
 }

package/src/main.ts

@@ -5,16 +5,11 @@ import { initPageBuilder } from './composables/builderInstance'
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
-import { setupI18n } from './i18n'
 
-async function bootstrap() {
-  const i18n = await setupI18n()
-  initPageBuilder(i18n)
+initPageBuilder()
 
-  const app = createApp(App)
-  app.use(createPinia())
-  app.use(i18n)
-  app.mount('#app')
-}
+const app = createApp(App)
 
-bootstrap()
+app.use(createPinia())
+
+app.mount('#app')

package/src/services/PageBuilderService.ts

@@ -7,7 +7,6 @@ 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'
@@ -49,10 +48,7 @@ export const AVAILABLE_LANGUAGES: AvailableLanguage[] = [
   '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)$/
@@ -77,8 +73,7 @@ export class PageBuilderService {
   private pendingMountComponents: BuilderResourceData | null = null
   private isPageBuilderMissingOnStart: boolean = false
 
-  constructor(pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>, i18n: I18n) {
-    this.i18n = i18n
+  constructor(pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>) {
     this.hasStartedEditing = false
     this.pageBuilderStateStore = pageBuilderStateStore
     this.getApplyImageToSelection = computed(
@@ -269,55 +264,6 @@ 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: {
@@ -334,52 +280,6 @@ 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)
-      }
-    }
   }
 
   /**
@@ -408,20 +308,6 @@ 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
@@ -549,7 +435,7 @@ export class PageBuilderService {
         }
 
         if (!passedComponentsArray && !localStorageData && this.isPageBuilderMissingOnStart) {
-          console.log('XXXX:', internalPageBuilderCall)
+          console.log('10000:', internalPageBuilderCall)
           await this.completeMountProcess(JSON.stringify(this.pendingMountComponents), true)
           this.saveDomComponentsToLocalStorage()
           return
@@ -913,11 +799,33 @@ export class PageBuilderService {
 
   public handleManualSave = async () => {
     this.startEditing()
+    const passedConfig = this.pageBuilderStateStore.getPageBuilderConfig
 
-    this.pageBuilderStateStore.setIsSaving(true)
-    this.saveDomComponentsToLocalStorage()
-    await delay(400)
-    this.pageBuilderStateStore.setIsSaving(false)
+    // 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)
+    }
   }
 
   public cloneCompObjForDOMInsertion(componentObject: ComponentObject): ComponentObject {

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

@@ -67,6 +67,7 @@ interface PageBuilderState {
   hasLocalDraftForUpdate: boolean
   isResumeEditing: boolean
   isRestoring: boolean
+  currentLanguage: string
 }
 
 export const usePageBuilderStateStore = defineStore('pageBuilderState', {
@@ -129,6 +130,7 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     hasLocalDraftForUpdate: false,
     isResumeEditing: false,
     isRestoring: false,
+    currentLanguage: 'en',
   }),
   getters: {
     // Core Page Builder Getters
@@ -284,6 +286,7 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     getHasLocalDraftForUpdate: (state: PageBuilderState): boolean => state.hasLocalDraftForUpdate,
     getIsLoadingResumeEditing: (state: PageBuilderState): boolean => state.isResumeEditing,
     getIsRestoring: (state: PageBuilderState): boolean => state.isRestoring,
+    getCurrentLanguage: (state: PageBuilderState): string => state.currentLanguage,
   },
   actions: {
     setComponentArrayAddMethod(payload: string | null): void {
@@ -489,5 +492,8 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     setIsRestoring(payload: boolean): void {
       this.isRestoring = payload
     },
+    setCurrentLanguage(payload: string): void {
+      this.currentLanguage = payload
+    },
   },
 })

package/src/tests/PageBuilderTest.vue

@@ -6,19 +6,49 @@ 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 = [
-  { key: 'liveDragDropBuilder' },
-  { key: 'trueVisualEditing' },
-  { key: 'features' },
-  { key: 'technologies' },
-  { key: 'setBrandAndLinkColors' },
-  { key: 'mobileFirstApproach' },
-  { key: 'mediaLibrary' },
-  { key: 'minimalIntuitiveDesign' },
+  {
+    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.',
+  },
 ]
 
 const publishPageBuilder = function () {}
@@ -30,7 +60,7 @@ const htmlString =
   '</div>'
 
 // Parse as HTML (not JSON)
-const { /* components, */ pageSettings } = pageBuilderService.parsePageBuilderHTML(htmlString)
+const { components, pageSettings } = pageBuilderService.parsePageBuilderHTML(htmlString)
 
 const configPageBuilder = {
   userForPageBuilder: {
@@ -52,10 +82,8 @@ const configPageBuilder = {
     theme: 'light',
     language: {
       default: 'en',
-      enable: ['en', 'zh-Hans', 'fr', 'ja', 'ru', 'es', 'pt', 'de', 'ar', 'hi'],
-      disableLanguageDropDown: false,
+      disable: ['fr', 'es'],
     },
-    autoSave: true,
   },
   settings: {
     brandColor: '#DB93B0',
@@ -64,7 +92,7 @@ const configPageBuilder = {
 } as const
 
 onMounted(async () => {
-  const result = await pageBuilderService.startBuilder(configPageBuilder)
+  const result = await pageBuilderService.startBuilder(configPageBuilder, components)
   console.log('Page Builder inspect the result for message, status, or error::', result)
 })
 </script>
@@ -74,15 +102,19 @@ onMounted(async () => {
     <div class="pbx-myPrimaryWidthScreenModule pbx-bg-red-50 lg:pbx-block">
       <div class="pbx-myPrimaryContentSection">
         <h2 class="pbx-mySecondaryHeader">
-          {{ $t('branding.mainHeader') }}
+          Bring your vision to life and create impressive pages using a click & drop Page Builder
         </h2>
         <p class="pbx-myPrimaryParagraph pbx-font-normal">
-          {{ $t('branding.description') }}
+          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.
+
           <br />
         </p>
         <div class="pbx-mt-4">
           <p class="pbx-myPrimaryParagraph pbx-font-normal">
-            {{ $t('branding.downloadDescription') }}
+            Download or install our powerful, flexible, and easy-to-use free Vue 3 Page Builder via
             <br />
             <strong> npm:</strong>
             <a
@@ -120,16 +152,16 @@ onMounted(async () => {
         >
           <div
             v-for="feature in features"
-            :key="feature.key"
+            :key="feature.name"
             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">{{ t(`features.${feature.key}.name`) }}</p>
+              <p class="pbx-myTertiaryHeader">{{ feature.name }}</p>
               <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-drop-shadow-sm">
-                {{ t(`features.${feature.key}.description`) }}
+                {{ feature.description }}
               </p>
             </div>
           </div>

package/src/tests/pageBuilderService.test.ts

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

package/src/types/index.ts

@@ -229,7 +229,7 @@ export interface PageBuilderConfig {
     theme?: 'light' | 'dark' | 'auto'
     language?: {
       default: 'en' | 'zh-Hans' | 'fr' | 'ja' | 'ru' | 'es' | 'pt' | 'de' | 'ar' | 'hi'
-      enable?: ReadonlyArray<
+      disable?: ReadonlyArray<
         'en' | 'zh-Hans' | 'fr' | 'ja' | 'ru' | 'es' | 'pt' | 'de' | 'ar' | 'hi'
       >
     }

package/src/i18n.ts

@@ -1,28 +0,0 @@
-import { createI18n } from 'vue-i18n'
-
-// Function to load all locale messages from JSON files
-async function loadLocaleMessages() {
-  const locales = import.meta.glob('./locales/*.json')
-  const messages: Record<string, object> = {}
-  for (const path in locales) {
-    const matched = path.match(/([A-Za-z0-9-_]+)\.json$/i)
-    if (matched && matched.length > 1) {
-      const locale = matched[1]
-      const module = (await locales[path]()) as { default: object }
-      messages[locale] = module.default
-    }
-  }
-  return messages
-}
-
-// Use this in main.ts: const i18n = await setupI18n()
-export async function setupI18n() {
-  const messages = await loadLocaleMessages()
-  return createI18n({
-    legacy: false, // you must set `false`, to use Composition API
-    locale: 'en', // set locale
-    fallbackLocale: 'en', // set fallback locale
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    messages: messages as any, // typecast to satisfy vue-i18n
-  })
-}