@myissue/vue-website-page-builder 3.3.72 → 3.3.74

package/src/locales/zh-Hans.json

@@ -0,0 +1,86 @@
+{
+  "Reset Page": "重置页面",
+  "Global Page Styles": "全局页面样式",
+  "Try the powerful Click & Drop Page Builder—designed for developers and creators who want full control without the hassle. Customize layouts, fonts, and colors. Edit content visually in real time. Add media, embed YouTube videos, or export everything as clean HTML. With responsive editing, local auto-save, Tailwind support, and even Unsplash integration, it's everything you need—wrapped in one seamless builder. Build Stunning Pages in Minutes.": "试试强大的Click & Drop Page Builder——专为希望完全控制而无需麻烦的开发者和创作者设计。自定义布局、字体和颜色。实时可视化编辑内容。添加媒体、嵌入YouTube视频或将所有内容导出为干净的HTML。凭借响应式编辑、本地自动保存、Tailwind支持，甚至Unsplash集成，它是您所需的一切——集成在一个无缝的构建器中。几分钟内构建令人惊叹的页面。",
+  "A Page Builder designed for growth. Build your website pages with ready-made components that are fully customizable and always responsive, designed to fit every need. A powerful Page Builder for growing merchants, brands, and agencies.": "为增长而设计的页面构建器。使用完全可定制且始终响应的现成组件构建您的网站页面，旨在满足所有需求。为不断发展的商家、品牌和代理商提供强大的页面构建器。",
+  "Everything you need. Break free from design limitations": "您需要的一切。突破设计限制",
+  "Bring your vision to life and create impressive pages using a click & drop Page Builder": "实现您的愿景，并使用点击和拖放页面构建器创建令人印象深刻的页面",
+  "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.": "令人惊叹页面的网页构建器。使用户能够设计和发布任何规模的现代页面。创建响应式页面，例如列表、工作或博客文章，并使用免费的点击和拖放页面构建器轻松管理内容。使用 TypeScript、Vue 3、Composition API、Pinia、CSS、Tailwind CSS 和 HTML 开发。",
+  "Download or install our powerful, flexible, and easy-to-use free Vue 3 Page Builder via": "通过下载或安装我们强大、灵活且易于使用的免费 Vue 3 页面构建器",
+  "Save": "保存",
+  "Add new Components": "添加新组件",
+  "Options": "选项",
+  "Config Overview": "配置概览",
+  "HTML Overview": "HTML概览",
+  "Delete Layout": "删除布局",
+  "avatar": "头像",
+  "Publish": "发布",
+  "Add Components to Page": "将组件添加到页面",
+  "Close": "关闭",
+  "Helper Components": "辅助组件",
+  "Click to add": "点击添加",
+  "component": "组件",
+  "Layout Components": "布局组件",
+  "Click to add component": "点击添加组件",
+  "Remove all Components": "删除所有组件",
+  "Are you sure you want to remove all Components?": "您确定要删除所有组件吗？",
+  "Styles": "样式",
+  "Apply styles that affect the entire page. These settings include global font family, text color, background color, and other universal styles that apply to all sections.": "应用影响整个页面的样式。这些设置包括全局字体系列、文本颜色、背景颜色和适用于所有部分的其他通用样式。",
+  "Update Page Styles": "更新页面样式",
+  "Download HTML": "下载HTML",
+  "Export the entire page as a standalone HTML file. This includes all sections, content, and applied styles, making it ready for use or integration elsewhere.": "将整个页面导出为独立的HTML文件。这包括所有部分、内容和应用的样式，使其可以随时使用或集成到其他地方。",
+  "Download HTML file": "下载HTML文件",
+  "Typographies": "排版",
+  "Font Appearance": "字体外观",
+  "Font Size": "字体大小",
+  "Select": "选择",
+  "Font size": "字体大小",
+  "Font tablet size": "平板字体大小",
+  "Font small screens": "小屏幕字体大小",
+  "Font weight": "字体粗细",
+  "Font family": "字体家族",
+  "Font Style": "字体样式",
+  "Opacity & Transparency": "不透明度和透明度",
+  "Padding": "内边距",
+  "Vertical Padding": "垂直内边距",
+  "Horizontal Padding": "水平内边距",
+  "Margin": "边距",
+  "Vertical Margin": "垂直边距",
+  "Horizontal Margin": "水平边距",
+  "Border Radius": "边框半径",
+  "Global": "全局",
+  "Specific": "具体",
+  "Border Radius top left": "边框半径 左上",
+  "Border Radius top right": "边框半径 右上",
+  "Border Radius bottom left": "边框半径 左下",
+  "Border Radius bottom right": "边框半径 右下",
+  "Border Style, Width & Color": "边框样式、宽度和颜色",
+  "Border": "边框",
+  "Border Style": "边框样式",
+  "Border Width": "边框宽度",
+  "Border Color": "边框颜色",
+  "Transparent": "透明",
+  "Generated CSS": "生成的CSS",
+  "This is the CSS applied by the builder. Add your own CSS and press Enter to apply it to the selected element.": "这是构建器应用的CSS。添加您自己的CSS并按Enter将其应用于选定的元素。",
+  "Add your CSS.": "添加您的CSS。",
+  "The pbx- prefix is added automatically.": "pbx-前缀会自动添加。",
+  "Type class": "输入类",
+  "Add": "添加",
+  "Inline Styles": "内联样式",
+  "These are the inline styles applied by the builder. Add your own styles and press Enter to apply them to the selected element.": "这些是构建器应用的内联样式。添加您自己的样式，然后按 Enter 将其应用于选定的元素。",
+  "Add your own style.": "添加您自己的样式。",
+  "property": "属性",
+  "value": "值",
+  "close": "关闭",
+  "Editing": "编辑",
+  "Loading...": "加载中...",
+  "Background Color": "背景颜色",
+  "Text Color": "文字颜色",
+  "Default black": "默认黑色",
+  "Remove Component?": "删除组件？",
+  "Are you sure you want to remove this Component?": "您确定要删除此组件吗？",
+  "Delete": "删除",
+  "Add to the bottom": "添加到底部",
+  "Preview": "预览",
+  "Mobile": "移动"
+}

package/src/services/PageBuilderService.ts

@@ -129,6 +129,10 @@ export class PageBuilderService {
   public availableLanguage(): AvailableLanguage[] {
     return AVAILABLE_LANGUAGES
   }
+
+  public changeLanguage(lang: string) {
+    this.pageBuilderStateStore.setCurrentLanguage(lang)
+  }
   // Deselect any selected or hovered elements in the builder UI
   async clearHtmlSelection(): Promise<void> {
     this.pageBuilderStateStore.setComponent(null)
@@ -264,6 +268,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: {
@@ -280,6 +333,15 @@ export class PageBuilderService {
     if (config && Object.keys(config).length !== 0 && config.constructor === Object) {
       this.ensureUpdateOrCreateConfig(config)
     }
+
+    this.ensureLanguage(config)
+  }
+
+  public saveUserSettingsStorage(newLang: string) {
+    localStorage.setItem(
+      'userSettingsPageBuilder',
+      JSON.stringify({ userSettings: { lang: newLang } }),
+    )
   }
 
   /**
@@ -422,7 +484,7 @@ export class PageBuilderService {
         if (localStorageData && this.isPageBuilderMissingOnStart) {
           console.log('8888:', internalPageBuilderCall)
           await this.completeMountProcess(JSON.stringify(this.pendingMountComponents), true)
-          await delay(3000)
+          await delay(400)
           this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
           this.pendingMountComponents = null
           return

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

@@ -67,7 +67,7 @@ interface PageBuilderState {
   hasLocalDraftForUpdate: boolean
   isResumeEditing: boolean
   isRestoring: boolean
-  currentLanguage: string
+  currentLanguage: string | null
 }
 
 export const usePageBuilderStateStore = defineStore('pageBuilderState', {
@@ -130,7 +130,7 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     hasLocalDraftForUpdate: false,
     isResumeEditing: false,
     isRestoring: false,
-    currentLanguage: 'en',
+    currentLanguage: null,
   }),
   getters: {
     // Core Page Builder Getters
@@ -286,7 +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,
+    getCurrentLanguage: (state: PageBuilderState): string | null => state.currentLanguage,
   },
   actions: {
     setComponentArrayAddMethod(payload: string | null): void {

package/src/tests/PageBuilderTest.vue

@@ -6,50 +6,10 @@ import DemoBuilderComponentsTest from '../tests/TestComponents/DemoBuilderCompon
 import { onMounted } from 'vue'
 import componentsArray from '../tests/componentsArray.test.json'
 import { getPageBuilder } from '../composables/builderInstance'
-const pageBuilderService = getPageBuilder()
+import { useTranslations } from '../composables/useTranslations'
 
-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.',
-  },
-]
+const pageBuilderService = getPageBuilder()
+const { translate } = useTranslations()
 
 const publishPageBuilder = function () {}
 
@@ -81,20 +41,22 @@ const configPageBuilder = {
   userSettings: {
     theme: 'light',
     language: {
-      default: 'en',
-      disable: ['fr', 'es'],
+      default: 'zh-Hans',
+      enable: ['en', 'zh-Hans', 'fr', 'ja', 'ru', 'es', 'pt', 'de', 'ar', 'hi'],
+      disableLanguageDropDown: false,
     },
     autoSave: true,
   },
+
   settings: {
     brandColor: '#DB93B0',
   },
-  pageSettings,
+  pageSettings: pageSettings,
 } as const
 
 onMounted(async () => {
   const result = await pageBuilderService.startBuilder(configPageBuilder, components)
-  console.log('Page Builder inspect the result for message, status, or error::', result)
+  console.log('Page Builder result for message, status, or error::', result)
 })
 </script>
 
@@ -103,19 +65,27 @@ 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
+          {{
+            translate(
+              'Bring your vision to life and create impressive pages using a click & drop Page Builder',
+            )
+          }}
         </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.
-
+          {{
+            translate(
+              '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">
-            Download or install our powerful, flexible, and easy-to-use free Vue 3 Page Builder via
+            {{
+              translate(
+                'Download or install our powerful, flexible, and easy-to-use free Vue 3 Page Builder via',
+              )
+            }}
             <br />
             <strong> npm:</strong>
             <a
@@ -139,34 +109,26 @@ onMounted(async () => {
     </div>
 
     <FullWidthElement :descriptionArea="true" class="pbx-bg-gray-50">
-      <template #title>Everything you need. Break free from design limitations </template>
+      <template #title>
+        {{ translate('Everything you need. Break free from design limitations') }}
+      </template>
       <template #description>
         <p class="pbx-myPrimaryParagraph pbx-font-normal">
-          A Page Builder designed for growth. Build your website pages with ready-made components
-          that are fully customizable and always responsive, designed to fit every need. A powerful
-          Page Builder for growing merchants, brands, and agencies.
+          {{
+            translate(
+              'A Page Builder designed for growth. Build your website pages with ready-made components that are fully customizable and always responsive, designed to fit every need. A powerful Page Builder for growing merchants, brands, and agencies.',
+            )
+          }}
         </p>
       </template>
       <template #content>
-        <div
-          class="pbx-grid pbx-grid-cols-1 pbx-gap-8 sm:pbx-grid-cols-2 md:pbx-grid-cols-2 lg:pbx-grid-cols-4 pbx-mt-8"
-        >
-          <div
-            v-for="feature in features"
-            :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">{{ feature.name }}</p>
-              <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-drop-shadow-sm">
-                {{ feature.description }}
-              </p>
-            </div>
-          </div>
-        </div>
+        <p class="pbx-myPrimaryParagraph pbx-font-normal">
+          {{
+            translate(
+              "Try the powerful Click & Drop Page Builder—designed for developers and creators who want full control without the hassle. Customize layouts, fonts, and colors. Edit content visually in real time. Add media, embed YouTube videos, or export everything as clean HTML. With responsive editing, local auto-save, Tailwind support, and even Unsplash integration, it's everything you need—wrapped in one seamless builder. Build Stunning Pages in Minutes.",
+            )
+          }}
+        </p>
       </template>
     </FullWidthElement>
   </div>

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'
-      disable?: ReadonlyArray<
+      enable?: ReadonlyArray<
         'en' | 'zh-Hans' | 'fr' | 'ja' | 'ru' | 'es' | 'pt' | 'de' | 'ar' | 'hi'
       >
     }