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

package/src/PageBuilder/PageBuilder.vue

@@ -12,6 +12,7 @@ import { delay } from '../composables/delay'
 import { useDebounce } from '../composables/useDebounce.ts'
 import DynamicModalBuilder from '../Components/Modals/DynamicModalBuilder.vue'
 import GlobalLoader from '../Components/Loaders/GlobalLoader.vue'
+import { useTranslations } from '../composables/useTranslations'
 import { getPageBuilder } from '../composables/builderInstance'
 const pageBuilderService = getPageBuilder()
 /**
@@ -40,6 +41,8 @@ const props = defineProps({
   },
 })
 
+const { translate, loadTranslations } = useTranslations()
+
 // Use shared Pinia instance for PageBuilder package
 const internalPinia = sharedPageBuilderPinia
 
@@ -69,6 +72,27 @@ const closeAddComponentModal = () => {
 }
 provide('closeAddComponentModal', closeAddComponentModal)
 
+const languageSelction = ref('en')
+
+let isInitializingLang = true
+const isLoadingLang = ref(false)
+
+// Watch for changes in languageSelction
+watch(languageSelction, async (newVal) => {
+  if (newVal && !isInitializingLang) {
+    isLoadingLang.value = true
+    await delay(200)
+    await loadTranslations(newVal)
+    pageBuilderService.changeLanguage(newVal)
+
+    // Ensure lang is updated within userSettings
+    const userSettings = JSON.parse(localStorage.getItem('userSettingsPageBuilder')) || {}
+    userSettings.lang = newVal
+    localStorage.setItem('userSettingsPageBuilder', JSON.stringify(userSettings))
+    isLoadingLang.value = false
+  }
+})
+
 const getCurrentLanguage = computed(() => {
   return pageBuilderStateStore.getCurrentLanguage
 })
@@ -125,8 +149,8 @@ const handleAddComponent = async function () {
   await pageBuilderService.clearHtmlSelection()
 
   //
-  titleModalAddComponent.value = 'Add Components to Page'
-  firstButtonTextSearchComponents.value = 'Close'
+  titleModalAddComponent.value = translate('Add Components to Page')
+  firstButtonTextSearchComponents.value = translate('Close')
   showModalAddComponent.value = true
 
   firstModalButtonSearchComponentsFunction.value = function () {
@@ -346,10 +370,28 @@ function updatePanelPosition() {
   }
 }
 
+const userSettings = JSON.parse(localStorage.getItem('userSettingsPageBuilder'))
+
 onMounted(async () => {
   // await delay(2000)
   await pageBuilderService.completeBuilderInitialization(undefined, true)
 
+  if (userSettings && userSettings.lang) {
+    languageSelction.value = userSettings.lang
+  }
+  if (
+    getPageBuilderConfig.value &&
+    getPageBuilderConfig.value.userSettings &&
+    getPageBuilderConfig.value.userSettings.language &&
+    getPageBuilderConfig.value.userSettings.language.default &&
+    (!userSettings || !userSettings.lang)
+  ) {
+    languageSelction.value = getPageBuilderConfig.value.userSettings.language.default
+  }
+
+  await loadTranslations(languageSelction.value)
+  isInitializingLang = false
+
   updatePanelPosition()
 
   // Set up MutationObserver and event listeners
@@ -387,9 +429,11 @@ onMounted(async () => {
 
 <template>
   <div
-    class="pbx-font-sans pbx-max-w-full pbx-border-solid pbx-border pbx-border-gray-400 pbx-inset-x-0 pbx-z-10 pbx-bg-white pbx-overflow-x-auto pbx-h-full"
+    class="pbx-font-sans pbx-text-black pbx-max-w-full pbx-border-solid pbx-border pbx-border-gray-400 pbx-inset-x-0 pbx-z-10 pbx-bg-white pbx-overflow-x-auto pbx-h-full"
   >
-    <GlobalLoader v-if="getIsLoadingGlobal && !openAppNotStartedModal"></GlobalLoader>
+    <GlobalLoader
+      v-if="(getIsLoadingGlobal && !openAppNotStartedModal) || isLoadingLang"
+    ></GlobalLoader>
     <ModalBuilder
       title="The builder hasn’t started yet"
       :showModalBuilder="openAppNotStartedModal"
@@ -413,7 +457,7 @@ onMounted(async () => {
     ></BuilderComponents>
 
     <ModalBuilder
-      title="Preview"
+      title="Desktop"
       :showModalBuilder="openPageBuilderPreviewModal"
       @closeMainModalBuilder="firstPageBuilderPreviewModalButton"
       maxWidth="screen"
@@ -543,7 +587,7 @@ onMounted(async () => {
                   ></span>
                 </span>
               </div>
-              <div>Save</div>
+              <div>{{ translate('Save') }}</div>
             </button>
             <!-- Save End -->
 
@@ -586,7 +630,7 @@ onMounted(async () => {
                   </span>
                 </div>
                 <div class="lg:pbx-block pbx-hidden">
-                  <span> Reset Page </span>
+                  <span> {{ translate('Reset Page') }} </span>
                 </div>
               </button>
             </template>
@@ -623,10 +667,12 @@ 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">Add new Components</div>
+                  <div class="pbx-whitespace-nowrap pbx-cursor-pointer">
+                    {{ translate('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"
+                  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 focus-visible:pbx-ring-0 pbx-text-black hover:pbx-text-white"
                 >
                   <span class="pbx-myMediumIcon material-symbols-outlined"> interests </span>
                 </span>
@@ -645,7 +691,7 @@ onMounted(async () => {
               >
                 <div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2">
                   <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"
+                    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 focus-visible:pbx-ring-0 pbx-text-black hover:pbx-text-white"
                   >
                     <span class="pbx-myMediumIcon material-symbols-outlined"> visibility </span>
                   </span>
@@ -665,7 +711,7 @@ onMounted(async () => {
               >
                 <div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2">
                   <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"
+                    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 pbx-text-black hover:pbx-text-white"
                   >
                     <span class="material-symbols-outlined"> phone_iphone </span>
                   </span>
@@ -702,7 +748,7 @@ onMounted(async () => {
                 }
               "
             >
-              Publish
+              {{ translate('Publish') }}
             </button>
           </div>
         </template>
@@ -731,6 +777,57 @@ onMounted(async () => {
         </template>
 
         <!-- Close & Publish buttons end -->
+
+        <template
+          v-if="
+            getPageBuilderConfig &&
+            getPageBuilderConfig.userSettings &&
+            getPageBuilderConfig.userSettings.language &&
+            !getPageBuilderConfig.userSettings.language.disableLanguageDropDown
+          "
+        >
+          <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="languageSelction"
+              >
+                <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>
       </div>
 
       <!-- Top Layout Save And Reset Area - End -->
@@ -754,7 +851,7 @@ onMounted(async () => {
                     handleAddComponent()
                   }
                 "
-                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"
+                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 pbx-text-black hover:pbx-text-white"
               >
                 <span class="pbx-myMediumIcon material-symbols-outlined"> interests </span>
               </button>
@@ -773,7 +870,7 @@ onMounted(async () => {
 
         <main
           ref="pbxToolBar"
-          class="pbx-flex pbx-flex-col pbx-grow pbx-rounded-tr-2xl pbx-rounded-tl-2xl pbx-border-solid pbx-border pbx-border-gray-200 pbx-items-stretch pbx-h-[100vh] pbx-text-black"
+          class="pbx-font-sans pbx-p-1 pbx-flex pbx-flex-col pbx-grow pbx-rounded-tr-2xl pbx-rounded-tl-2xl pbx-border-solid pbx-border pbx-border-gray-200 pbx-items-stretch pbx-h-[100vh] pbx-text-black"
           :class="{ 'pbx-mr-2': !getMenuRight, '': getMenuRight }"
         >
           <div
@@ -831,10 +928,9 @@ onMounted(async () => {
               v-if="!getMenuRight"
               @click="pageBuilderStateStore.setMenuRight(true)"
               type="button"
-              class="pbx-mySecondaryButton"
+              class="pbx-mySecondaryButton pbx-px-2 pbx-text-xs"
             >
-              <span class="material-symbols-outlined"> view_sidebar </span>
-              <span> Tools </span>
+              <span> {{ translate('Styles') }} </span>
             </button>
           </div>
         </div>
@@ -866,12 +962,12 @@ 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">Add to the bottom</div>
+            <div class="pbx-whitespace-nowrap">{{ translate('Add to the bottom') }}</div>
           </span>
           <div class="pbx-flex pbx-gap-2 pbx-items-center pbx-justify-center">
             <button
               type="button"
-              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"
+              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 pbx-text-black hover:pbx-text-white"
             >
               <span class="pbx-myMediumIcon material-symbols-outlined"> interests </span>
             </button>

package/src/composables/useTranslations.ts

@@ -0,0 +1,28 @@
+import { ref, readonly } from 'vue'
+import type { Ref } from 'vue'
+
+const translations: Ref<Record<string, string>> = ref({})
+
+async function loadTranslations(language: string) {
+  try {
+    const localeModule = await import(`../locales/${language}.json`)
+    translations.value = localeModule.default
+  } catch (error) {
+    console.error(`Could not load translations for language: ${language}`, error)
+    if (language !== 'en') {
+      await loadTranslations('en')
+    }
+  }
+}
+
+export function useTranslations() {
+  function translate(key: string): string {
+    return translations.value[key] || key
+  }
+
+  return {
+    translate,
+    loadTranslations,
+    currentTranslations: readonly(translations),
+  }
+}

package/src/css/style.css

@@ -415,6 +415,7 @@
 #pagebuilder {
   position: relative;
   overflow-y: auto;
+  padding: 4px;
 }
 #pagebuilder a {
   pointer-events: none;
@@ -496,7 +497,7 @@
   outline-offset: -2px !important;
 }
 
-.pbx-myPrimarySelect {
+.pbx-myPrimarySelec select {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;

package/src/locales/ar.json

@@ -0,0 +1,85 @@
+{
+  "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 - المصمم للمطورين والمبدعين الذين يريدون التحكم الكامل دون عناء. قم بتخصيص التخطيطات والخطوط والألوان. قم بتحرير المحتوى بصريًا في الوقت الفعلي. أضف الوسائط، قم بتضمين مقاطع فيديو 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": "قيمة",
+  "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/locales/de.json

@@ -0,0 +1,86 @@
+{
+  "Reset Page": "Seite zurücksetzen",
+  "Global Page Styles": "Globale Seitenstile",
+  "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.": "Probieren Sie den leistungsstarken Click & Drop Page Builder aus – entwickelt für Entwickler und Kreative, die volle Kontrolle ohne Aufwand wünschen. Passen Sie Layouts, Schriftarten und Farben an. Bearbeiten Sie Inhalte visuell in Echtzeit. Fügen Sie Medien hinzu, betten Sie YouTube-Videos ein oder exportieren Sie alles als sauberes HTML. Mit responsiver Bearbeitung, lokalem automatischen Speichern, Tailwind-Unterstützung und sogar Unsplash-Integration ist es alles, was Sie brauchen – verpackt in einem nahtlosen Builder. Erstellen Sie beeindruckende Seiten in Minuten.",
+  "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.": "Ein Seiten-Builder, der für Wachstum entwickelt wurde. Erstellen Sie Ihre Website-Seiten mit vorgefertigten Komponenten, die vollständig anpassbar und immer reaktionsschnell sind, um alle Anforderungen zu erfüllen. Ein leistungsstarker Seiten-Builder für wachsende Händler, Marken und Agenturen.",
+  "Everything you need. Break free from design limitations": "Alles, was Sie brauchen. Befreien Sie sich von Designbeschränkungen",
+  "Bring your vision to life and create impressive pages using a click & drop Page Builder": "Verwirklichen Sie Ihre Vision und erstellen Sie beeindruckende Seiten mit einem 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.": "Der Web-Builder für atemberaubende Seiten. Ermöglichen Sie Benutzern, moderne Seiten in jeder Größenordnung zu entwerfen und zu veröffentlichen. Erstellen Sie responsive Seiten wie Listen, Jobs oder Blog-Posts und verwalten Sie Inhalte einfach mit dem kostenlosen Click & Drop Page Builder. Entwickelt mit TypeScript, Vue 3, Composition API, Pinia, CSS, Tailwind CSS und HTML.",
+  "Download or install our powerful, flexible, and easy-to-use free Vue 3 Page Builder via": "Laden Sie den leistungsstarken, flexiblen und benutzerfreundlichen kostenlosen Vue 3 Page Builder herunter oder installieren Sie ihn über",
+  "Save": "Speichern",
+  "Add new Components": "Neue Komponenten hinzufügen",
+  "Options": "Optionen",
+  "Config Overview": "Konfigurationsübersicht",
+  "HTML Overview": "HTML-Übersicht",
+  "Delete Layout": "Layout löschen",
+  "avatar": "Avatar",
+  "Publish": "Veröffentlichen",
+  "Add Components to Page": "Komponenten zur Seite hinzufügen",
+  "Close": "Schließen",
+  "Helper Components": "Hilfskomponenten",
+  "Click to add": "Klicken, um hinzuzufügen",
+  "component": "Komponente",
+  "Layout Components": "Layout-Komponenten",
+  "Click to add component": "Klicken, um Komponente hinzuzufügen",
+  "Remove all Components": "Alle Komponenten entfernen",
+  "Are you sure you want to remove all Components?": "Sind Sie sicher, dass Sie alle Komponenten entfernen möchten?",
+  "Styles": "Stile",
+  "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.": "Wenden Sie Stile an, die die gesamte Seite betreffen. Diese Einstellungen umfassen globale Schriftfamilie, Textfarbe, Hintergrundfarbe und andere universelle Stile, die auf alle Abschnitte angewendet werden.",
+  "Update Page Styles": "Seitenstile aktualisieren",
+  "Download HTML": "HTML herunterladen",
+  "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.": "Exportieren Sie die gesamte Seite als eigenständige HTML-Datei. Dies umfasst alle Abschnitte, Inhalte und angewendeten Stile, sodass sie bereit für die Verwendung oder Integration an anderer Stelle ist.",
+  "Download HTML file": "HTML-Datei herunterladen",
+  "Typographies": "Typografien",
+  "Font Appearance": "Schriftbild",
+  "Font Size": "Schriftgröße",
+  "Select": "Auswählen",
+  "Font size": "Schriftgröße",
+  "Font tablet size": "Schriftgröße für Tablets",
+  "Font small screens": "Schriftgröße für kleine Bildschirme",
+  "Font weight": "Schriftgewicht",
+  "Font family": "Schriftfamilie",
+  "Font Style": "Schriftstil",
+  "Opacity & Transparency": "Deckkraft & Transparenz",
+  "Padding": "Abstand",
+  "Vertical Padding": "Vertikaler Abstand",
+  "Horizontal Padding": "Horizontaler Abstand",
+  "Margin": "Rand",
+  "Vertical Margin": "Vertikaler Rand",
+  "Horizontal Margin": "Horizontaler Rand",
+  "Border Radius": "Randradius",
+  "Global": "Global",
+  "Specific": "Spezifisch",
+  "Border Radius top left": "Randradius oben links",
+  "Border Radius top right": "Randradius oben rechts",
+  "Border Radius bottom left": "Randradius unten links",
+  "Border Radius bottom right": "Randradius unten rechts",
+  "Border Style, Width & Color": "Randstil, Breite & Farbe",
+  "Border": "Rand",
+  "Border Style": "Randstil",
+  "Border Width": "Randbreite",
+  "Border Color": "Randfarbe",
+  "Transparent": "Transparent",
+  "Generated CSS": "Generiertes CSS",
+  "This is the CSS applied by the builder. Add your own CSS and press Enter to apply it to the selected element.": "Dies ist das vom Builder angewendete CSS. Fügen Sie Ihr eigenes CSS hinzu und drücken Sie Enter, um es auf das ausgewählte Element anzuwenden.",
+  "Add your CSS.": "Fügen Sie Ihr CSS hinzu.",
+  "The pbx- prefix is added automatically.": "Das pbx- Präfix wird automatisch hinzugefügt.",
+  "Type class": "Klasse eingeben",
+  "Add": "Hinzufügen",
+  "Inline Styles": "Inline-Stile",
+  "These are the inline styles applied by the builder. Add your own styles and press Enter to apply them to the selected element.": "Dies sind die vom Builder angewendeten Inline-Stile. Fügen Sie Ihre eigenen Stile hinzu und drücken Sie die Eingabetaste, um sie auf das ausgewählte Element anzuwenden.",
+  "Add your own style.": "Fügen Sie Ihren eigenen Stil hinzu.",
+  "property": "Eigenschaft",
+  "value": "Wert",
+  "close": "schließen",
+  "Editing": "Bearbeiten",
+  "Loading...": "Wird geladen...",
+  "Background Color": "Hintergrundfarbe",
+  "Text Color": "Textfarbe",
+  "Default black": "Standard Schwarz",
+  "Remove Component?": "Komponente entfernen?",
+  "Are you sure you want to remove this Component?": "Sind Sie sicher, dass Sie diese Komponente entfernen möchten?",
+  "Delete": "Löschen",
+  "Add to the bottom": "Zum Ende hinzufügen",
+  "Preview": "Vorschau",
+  "Mobile": "Mobil"
+}

package/src/locales/en.json

@@ -0,0 +1,93 @@
+{
+  "Reset Page": "Reset Page",
+  "Global Page Styles": "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.": "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.",
+  "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.": "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": "Everything you need. Break free from design limitations",
+  "Bring your vision to life and create impressive pages using a click & drop Page Builder": "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.": "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.",
+  "Download or install our powerful, flexible, and easy-to-use free Vue 3 Page Builder via": "Download or install our powerful, flexible, and easy-to-use free Vue 3 Page Builder via",
+  "Save": "Save",
+  "Add new Components": "Add new Components",
+  "Options": "Options",
+  "Config Overview": "Config Overview",
+  "HTML Overview": "HTML Overview",
+  "Delete Layout": "Delete Layout",
+  "avatar": "avatar",
+  "Publish": "Publish",
+  "Add Components to Page": "Add Components to Page",
+  "Close": "Close",
+  "Helper Components": "Helper Components",
+  "Click to add": "Click to add",
+  "component": "component",
+  "Layout Components": "Layout Components",
+  "Click to add component": "Click to add component",
+  "Remove all Components": "Remove all Components",
+  "Are you sure you want to remove all Components?": "Are you sure you want to remove all Components?",
+  "Styles": "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.": "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": "Update Page Styles",
+  "Download HTML": "Download 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.": "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.",
+  "Download HTML file": "Download HTML file",
+  "Typographies": "Typographies",
+  "Font Appearance": "Font Appearance",
+  "Font Size": "Font Size",
+  "Select": "Select",
+  "Font size": "Font size",
+  "Font tablet size": "Font tablet size",
+  "Font small screens": "Font small screens",
+  "Font weight": "Font weight",
+  "Font family": "Font family",
+  "Font Style": "Font Style",
+  "Opacity & Transparency": "Opacity & Transparency",
+  "Padding": "Padding",
+  "Vertical Padding": "Vertical Padding",
+  "Horizontal Padding": "Horizontal Padding",
+  "Margin": "Margin",
+  "Vertical Margin": "Vertical Margin",
+  "Horizontal Margin": "Horizontal Margin",
+  "Border Radius": "Border Radius",
+  "Global": "Global",
+  "Specific": "Specific",
+  "Border Radius top left": "Border Radius top left",
+  "Border Radius top right": "Border Radius top right",
+  "Border Radius bottom left": "Border Radius bottom left",
+  "Border Radius bottom right": "Border Radius bottom right",
+  "Border Style, Width & Color": "Border Style, Width & Color",
+  "Border": "Border",
+  "Border Style": "Border Style",
+  "Border Width": "Border Width",
+  "Border Color": "Border Color",
+  "Transparent": "Transparent",
+  "Generated CSS": "Generated CSS",
+  "This is the CSS applied by the builder. Add your own CSS and press Enter to apply it to the selected element.": "This is the CSS applied by the builder. Add your own CSS and press Enter to apply it to the selected element.",
+  "Add your CSS.": "Add your CSS.",
+  "The pbx- prefix is added automatically.": "The pbx- prefix is added automatically.",
+  "Type class": "Type class",
+  "Add": "Add",
+  "Inline Styles": "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.": "These are the inline styles applied by the builder. Add your own styles and press Enter to apply them to the selected element.",
+  "Add your own style.": "Add your own style.",
+  "property": "property",
+  "value": "value",
+  "close": "close",
+  "Editing": "Editing",
+  "Global Page Styles": "Global Page 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.": "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": "Update Page Styles",
+  "Download HTML": "Download 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.": "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.",
+  "Download HTML file": "Download HTML file",
+  "Loading...": "Loading...",
+  "Background Color": "Background Color",
+  "Transparent": "Transparent",
+  "Text Color": "Text Color",
+  "Default black": "Default black",
+  "Remove Component?": "Remove Component?",
+  "Are you sure you want to remove this Component?": "Are you sure you want to remove this Component?",
+  "Delete": "Delete",
+  "Add to the bottom": "Add to the bottom",
+  "Preview": "Preview",
+  "Mobile": "Mobile"
+}