@myissue/vue-website-page-builder 3.3.78 → 3.3.80

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/{ar-CCqXqp3s.js → ar-BKP2GbBb.js} +40 -20
  2. package/dist/{de-DU6Hv8W2.js → de-CX2p6WRg.js} +45 -25
  3. package/dist/{en-DzWxts11.js → en-hbIz7x2o.js} +32 -12
  4. package/dist/{es-DmzWA1F8.js → es-BxsOdyOn.js} +32 -12
  5. package/dist/{fr-BARDIQ1D.js → fr-SEE-rKYV.js} +48 -28
  6. package/dist/{hi-BgQJcRDP.js → hi-DZd4Kv3J.js} +38 -18
  7. package/dist/{ja-Drg74-B1.js → ja-BGzkN2We.js} +42 -22
  8. package/dist/{pt-5fYEJgIl.js → pt-BMfrvh-9.js} +43 -23
  9. package/dist/{ru-D0zybCPa.js → ru-wi4VbdJp.js} +40 -20
  10. package/dist/style.css +1 -1
  11. package/dist/vue-website-page-builder.js +2250 -2249
  12. package/dist/vue-website-page-builder.umd.cjs +37 -37
  13. package/dist/{zh-Hans-notf0z2N.js → zh-Hans-B4txt13y.js} +42 -22
  14. package/package.json +1 -1
  15. package/src/Components/Modals/ModalBuilder.vue +2 -2
  16. package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue +1 -1
  17. package/src/Components/TipTap/TipTap.vue +4 -1
  18. package/src/Components/TipTap/TipTapInput.vue +17 -12
  19. package/src/PageBuilder/PageBuilder.vue +277 -280
  20. package/src/PageBuilder/Preview.vue +1 -1
  21. package/src/locales/ar.json +18 -1
  22. package/src/locales/de.json +18 -1
  23. package/src/locales/en.json +18 -1
  24. package/src/locales/es.json +18 -1
  25. package/src/locales/fr.json +18 -1
  26. package/src/locales/hi.json +18 -1
  27. package/src/locales/ja.json +18 -1
  28. package/src/locales/pt.json +18 -1
  29. package/src/locales/ru.json +18 -1
  30. package/src/locales/zh-Hans.json +18 -1
  31. package/src/services/PageBuilderService.ts +3 -13
  32. package/src/tests/PageBuilderTest.vue +34 -10
  33. package/src/tests/componentsArray.test.json +8 -8
package/src/PageBuilder/Preview.vue CHANGED
@@ -28,7 +28,7 @@ watchEffect(() => {
28
28
  const doc = iframe.contentWindow.document
29
29
  doc.open()
30
30
  doc.write(
31
- `<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body>${htmlPage.value}</body></html>`,
31
+ `<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body><div class="pbx-font-sans pbx-text-black">${htmlPage.value}</div></body></html>`,
32
32
  )
33
33
  doc.close()
34
34
 
package/src/locales/ar.json CHANGED
@@ -80,5 +80,22 @@
80
80
  "Delete": "حذف",
81
81
  "Add to the bottom": "أضف إلى الأسفل",
82
82
  "Preview": "معاينة",
83
- "Mobile": "جوال"
83
+ "Mobile": "جوال",
84
+ "Demo Content": "معاينة",
85
+ "Demo Description": "تعرف على منشئ الصفحات الخفيف والمجاني Vue Click & Drop. قم بإنشاء وتعزيز التجارب الرقمية بسهولة باستخدام Vue. ليس كل شيء قوي يجب أن يكون معقدًا. يوفر هذا المنشئ البسيط والخفيف واجهة أنيقة وبديهية تركز على البساطة والسرعة. قم ببناء صفحات متجاوبة بالكامل مثل القوائم، لوحات الوظائف، أو منشورات المدونة - وأدر محتواك بسهولة باستخدام منشئ الصفحات المجاني Click & Drop.",
86
+ "Demo Description Two": "منشئ صفحات مصمم للنمو. قم ببناء صفحات موقعك الإلكتروني باستخدام مكونات جاهزة قابلة للتخصيص بالكامل ومتجاوبة دائمًا، مصممة لتلبية كل احتياجاتك. منشئ صفحات قوي للتجار والعلامات التجارية والوكالات المتنامية.",
87
+ "Demo Description Three": "منشئ مواقع الويب الذي يعشقه المصممون. يمكنك بسهولة تصميم وتخطيطات المعاينة والضبط لكل حجم شاشة. نظيف. سريع. بديهي. ليس كل شيء قوي يجب أن يبدو معقدًا.",
88
+ "Demo Description Four": "تأكد من أن موقعك يبدو رائعًا على جميع الأجهزة. قم بتحرير محتوى النص مباشرة وفي الوقت الفعلي. اختر الخطوط المثالية التي تناسب أسلوبك. جرب بثقة مع القدرة على التراجع عن التغييرات. أنماط مسبوقة. لا يوجد خطر من تعارض الأنماط بين المنشئ وتطبيقك.",
89
+ "Demo Title": "منشئ الويب لصفحات مذهلة",
90
+ "Demo Title Two": "فقط انشره مع Vue",
91
+ "Demo Title Three": "تحرير متجاوب",
92
+ "Edit text and links": "تحرير النصوص والروابط",
93
+ "Enter URL": "أدخل عنوان URL",
94
+ "Line break": "فاصل سطر",
95
+ "Bold": "غامق",
96
+ "Link": "رابط",
97
+ "Header 2": "عنوان 2",
98
+ "Header 3": "عنوان 3",
99
+ "List": "قائمة",
100
+ "Add a valid URL to transform the selected text into a clickable hyperlink that directs users to the specified web address.": "أضف عنوان URL صالحًا لتحويل النص المحدد إلى ارتباط تشعبي قابل للنقر يوجه المستخدمين إلى عنوان الويب المحدد."
84
101
  }
package/src/locales/de.json CHANGED
@@ -82,5 +82,22 @@
82
82
  "Delete": "Löschen",
83
83
  "Add to the bottom": "Zum Ende hinzufügen",
84
84
  "Preview": "Vorschau",
85
- "Mobile": "Mobil"
85
+ "Mobile": "Mobil",
86
+ "Demo Content": "Demo-Inhalt",
87
+ "Demo Description": "Entdecken Sie den leichten und kostenlosen Vue Click & Drop Page Builder. Erstellen und verbessern Sie digitale Erlebnisse mühelos mit Vue. Nicht alles, was leistungsstark ist, muss komplex sein. Dieser minimalistische und leichte Page Builder bietet eine elegante, intuitive Oberfläche, die auf Einfachheit und Geschwindigkeit ausgelegt ist. Erstellen Sie vollständig responsive Seiten wie Listen, Jobbörsen oder Blogbeiträge – und verwalten Sie Ihre Inhalte mühelos mit dem kostenlosen Click & Drop Page Builder.",
88
+ "Demo Description Two": "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.",
89
+ "Demo Description Three": "Der Website-Builder, den Designer lieben. Entwerfen, prüfen und passen Sie Layouts für jede Bildschirmgröße einfach an. Sauber. Schnell. Intuitiv. Nicht alles, was leistungsstark ist, muss kompliziert aussehen.",
90
+ "Demo Description Four": "Stellen Sie sicher, dass Ihre Website auf allen Geräten gut aussieht. Bearbeiten Sie Textinhalte live und in Echtzeit. Wählen Sie die perfekten Schriftarten, die zu Ihrem Stil passen. Experimentieren Sie selbstbewusst mit der Möglichkeit, Änderungen rückgängig zu machen. Stile mit Präfix. Kein Risiko von Stilkonflikten zwischen dem Builder und Ihrer App.",
91
+ "Demo Title": "Der Web-Builder für atemberaubende Seiten",
92
+ "Demo Title Two": "Veröffentlichen Sie es einfach mit Vue",
93
+ "Demo Title Three": "Responsive Bearbeitung",
94
+ "Edit text and links": "Text und Links bearbeiten",
95
+ "Enter URL": "URL eingeben",
96
+ "Line break": "Zeilenumbruch",
97
+ "Bold": "Fett",
98
+ "Link": "Link",
99
+ "Header 2": "Überschrift 2",
100
+ "Header 3": "Überschrift 3",
101
+ "List": "Liste",
102
+ "Add a valid URL to transform the selected text into a clickable hyperlink that directs users to the specified web address.": "Fügen Sie eine gültige URL hinzu, um den ausgewählten Text in einen anklickbaren Hyperlink zu verwandeln, der Benutzer zur angegebenen Webadresse führt."
86
103
  }
package/src/locales/en.json CHANGED
@@ -81,5 +81,22 @@
81
81
  "Delete": "Delete",
82
82
  "Add to the bottom": "Add to the bottom",
83
83
  "Preview": "Preview",
84
- "Mobile": "Mobile"
84
+ "Mobile": "Mobile",
85
+ "Demo Content": "Demo Content",
86
+ "Demo Title": "The web builder for stunning pages",
87
+ "Demo Title Two": "Just publish it with Vue",
88
+ "Demo Title Three": "Responsive Editing",
89
+ "Demo Description": "Introducing the Lightweight & Free Vue Click & Drop Page Builder Create and enhance digital experiences effortlessly with Vue. Not everything powerful needs to be complex. This minimalist and lightweight page builder offers an elegant, intuitive interface focused on simplicity and speed. Build fully responsive pages such as listings, job boards, or blog posts—and manage your content with ease using the free Click & Drop Page Builder.",
90
+ "Demo Description Two": "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.",
91
+ "Demo Description Three": "The website builder loved by designers. Easily design, preview, and adjust layouts for every screen size. Clean. Fast. Intuitive. Not everything powerful has to look complicated.",
92
+ "Demo Description Four": "Ensure your site looks great on all devices. Edit text content live and in real-time. Choose the perfect fonts to match your style. Experiment confidently with the ability to revert changes. Styles Prefixed. No risk of style conflicts between the builder and your app.",
93
+ "Edit text and links": "Edit text and links",
94
+ "Enter URL": "Enter URL",
95
+ "Line break": "Line break",
96
+ "Bold": "Bold",
97
+ "Link": "Link",
98
+ "Header 2": "Header 2",
99
+ "Header 3": "Header 3",
100
+ "List": "List",
101
+ "Add a valid URL to transform the selected text into a clickable hyperlink that directs users to the specified web address.": "Add a valid URL to transform the selected text into a clickable hyperlink that directs users to the specified web address."
85
102
  }
package/src/locales/es.json CHANGED
@@ -82,5 +82,22 @@
82
82
  "Delete": "Eliminar",
83
83
  "Add to the bottom": "Agregar al final",
84
84
  "Preview": "Vista previa",
85
- "Mobile": "Móvil"
85
+ "Mobile": "Móvil",
86
+ "Demo Content": "Contenido de demostración",
87
+ "Demo Description": "Descubra el constructor de páginas ligero y gratuito Vue Click & Drop. Cree y mejore experiencias digitales sin esfuerzo con Vue. No todo lo poderoso tiene que ser complejo. Este constructor de páginas minimalista y ligero ofrece una interfaz elegante e intuitiva centrada en la simplicidad y la velocidad. Cree páginas completamente receptivas como listados, tableros de trabajo o publicaciones de blog, y gestione su contenido fácilmente con el constructor de páginas gratuito Click & Drop.",
88
+ "Demo Description Two": "Un constructor de páginas diseñado para el crecimiento. Cree las páginas de su sitio web con componentes listos para usar que son totalmente personalizables y siempre receptivos, diseñados para satisfacer todas las necesidades. Un poderoso constructor de páginas para comerciantes, marcas и agencias en crecimiento.",
89
+ "Demo Description Three": "El constructor de sitios web amado por los diseñadores. Diseñe, obtenga una vista previa y ajuste fácilmente los diseños para cada tamaño de pantalla. Limpio. Rápido. Intuitivo. No todo lo poderoso tiene que parecer complicado.",
90
+ "Demo Description Four": "Asegúrese de que su sitio se vea genial en todos los dispositivos. Edite el contenido de texto en vivo y en tiempo real. Elija las fuentes perfectas que coincidan con su estilo. Experimente con confianza con la capacidad de revertir los cambios. Estilos con prefijo. No hay riesgo de conflictos de estilo entre el constructor y su aplicación.",
91
+ "Demo Title": "El constructor web para páginas impresionantes",
92
+ "Demo Title Two": "Simplemente publícalo con Vue",
93
+ "Demo Title Three": "Edición receptiva",
94
+ "Edit text and links": "Editar texto y enlaces",
95
+ "Enter URL": "Introducir URL",
96
+ "Line break": "Salto de línea",
97
+ "Bold": "Negrita",
98
+ "Link": "Enlace",
99
+ "Header 2": "Encabezado 2",
100
+ "Header 3": "Encabezado 3",
101
+ "List": "Lista",
102
+ "Add a valid URL to transform the selected text into a clickable hyperlink that directs users to the specified web address.": "Agregue una URL válida para transformar el texto seleccionado en un hipervínculo clicable que dirija a los usuarios a la dirección web especificada."
86
103
  }
package/src/locales/fr.json CHANGED
@@ -82,5 +82,22 @@
82
82
  "Delete": "Supprimer",
83
83
  "Add to the bottom": "Ajouter en bas",
84
84
  "Preview": "Aperçu",
85
- "Mobile": "Mobile"
85
+ "Mobile": "Mobile",
86
+ "Demo Content": "Contenu de démonstration",
87
+ "Demo Description": "Découvrez le constructeur de pages léger et gratuit Vue Click & Drop. Créez et améliorez des expériences numériques sans effort avec Vue. Tout ce qui est puissant n'a pas besoin d'être complexe. Ce constructeur de pages minimaliste et léger offre une interface élégante et intuitive axée sur la simplicité et la rapidité. Créez des pages entièrement réactives telles que des listes, des tableaux d'offres d'emploi ou des articles de blog, et gérez votre contenu facilement avec le constructeur de pages gratuit Click & Drop.",
88
+ "Demo Description Two": "Un constructeur de pages conçu pour la croissance. Créez les pages de votre site Web avec des composants prêts à l'emploi qui sont entièrement personnalisables et toujours réactifs, conçus pour répondre à tous les besoins. Un puissant constructeur de pages pour les commerçants, les marques et les agences en pleine croissance.",
89
+ "Demo Description Three": "Le constructeur de sites Web adoré des designers. Concevez, prévisualisez et ajustez facilement les mises en page pour chaque taille d'écran. Propre. Rapide. Intuitif. Tout ce qui est puissant n'a pas à paraître compliqué.",
90
+ "Demo Description Four": "Assurez-vous que votre site est superbe sur tous les appareils. Modifiez le contenu textuel en direct et en temps réel. Choisissez les polices parfaites pour correspondre à votre style. Expérimentez en toute confiance avec la possibilité d'annuler les modifications. Styles préfixés. Aucun risque de conflits de style entre le constructeur et votre application.",
91
+ "Demo Title": "Le constructeur de sites Web pour des pages époustouflantes",
92
+ "Demo Title Two": "Publiez-le simplement avec Vue",
93
+ "Demo Title Three": "Édition réactive",
94
+ "Edit text and links": "Modifier le texte et les liens",
95
+ "Enter URL": "Entrer l'URL",
96
+ "Line break": "Saut de ligne",
97
+ "Bold": "Gras",
98
+ "Link": "Lien",
99
+ "Header 2": "Titre 2",
100
+ "Header 3": "Titre 3",
101
+ "List": "Liste",
102
+ "Add a valid URL to transform the selected text into a clickable hyperlink that directs users to the specified web address.": "Ajoutez une URL valide pour transformer le texte sélectionné en un lien hypertexte cliquable qui dirige les utilisateurs vers l'adresse Web spécifiée."
86
103
  }
package/src/locales/hi.json CHANGED
@@ -82,5 +82,22 @@
82
82
  "Delete": "हटाएं",
83
83
  "Add to the bottom": "नीचे जोड़ें",
84
84
  "Preview": "पूर्वावलोकन",
85
- "Mobile": "मोबाइल"
85
+ "Mobile": "मोबाइल",
86
+ "Demo Content": "डेमो सामग्री",
87
+ "Demo Description": "लाइटवेट और मुफ्त Vue Click & Drop पेज बिल्डर का परिचय। Vue के साथ डिजिटल अनुभवों को आसानी से बनाएं और बढ़ाएं। हर शक्तिशाली चीज़ को जटिल होने की आवश्यकता नहीं है। यह न्यूनतम और हल्का पेज बिल्डर एक सुरुचिपूर्ण, सहज इंटरफ़ेस प्रदान करता है जो सादगी और गति पर केंद्रित है। पूरी तरह से उत्तरदायी पृष्ठ बनाएं जैसे लिस्टिंग, जॉब बोर्ड, या ब्लॉग पोस्ट - और अपने सामग्री को आसानी से प्रबंधित करें मुफ्त Click & Drop पेज बिल्डर का उपयोग करके।",
88
+ "Demo Description Two": "विकास के लिए डिज़ाइन किया गया एक पेज बिल्डर। रेडीमेड घटकों के साथ अपनी वेबसाइट पेज बनाएं जो पूरी तरह से अनुकूलन योग्य और हमेशा उत्तरदायी हैं, हर आवश्यकता को पूरा करने के लिए डिज़ाइन किया गया है। बढ़ते व्यापारियों, ब्रांडों और एजेंसियों के लिए एक शक्तिशाली पेज बिल्डर।",
89
+ "Demo Description Three": "डिजाइनरों द्वारा पसंद किया जाने वाला वेबसाइट बिल्डर। हर स्क्रीन आकार के लिए आसानी से लेआउट डिजाइन, पूर्वावलोकन और समायोजित करें। स्वच्छ। तेज। सहज। हर शक्तिशाली चीज को जटिल दिखने की जरूरत नहीं है।",
90
+ "Demo Description Four": "सुनिश्चित करें कि आपकी साइट सभी उपकरणों पर बहुत अच्छी लगती है। पाठ्य सामग्री को लाइव और वास्तविक समय में संपादित करें। अपनी शैली से मेल खाने वाले सही फोंट चुनें। परिवर्तनों को वापस करने की क्षमता के साथ आत्मविश्वास से प्रयोग करें। शैलियाँ उपसर्ग। बिल्डर और आपके ऐप के बीच शैली संघर्ष का कोई खतरा नहीं है।",
91
+ "Demo Title": "शानदार पृष्ठों के लिए वेब बिल्डर",
92
+ "Demo Title Two": "बस इसे Vue के साथ प्रकाशित करें",
93
+ "Demo Title Three": "उत्तरदायी संपादन",
94
+ "Edit text and links": "पाठ और लिंक संपादित करें",
95
+ "Enter URL": "URL दर्ज करें",
96
+ "Line break": "लाइन ब्रेक",
97
+ "Bold": "बोल्ड",
98
+ "Link": "लिंक",
99
+ "Header 2": "हेडर 2",
100
+ "Header 3": "हेडर 3",
101
+ "List": "सूची",
102
+ "Add a valid URL to transform the selected text into a clickable hyperlink that directs users to the specified web address.": "चयनित पाठ को एक क्लिक करने योग्य हाइपरलिंक में बदलने के लिए एक मान्य URL जोड़ें जो उपयोगकर्ताओं को निर्दिष्ट वेब पते पर निर्देशित करता है।"
86
103
  }
package/src/locales/ja.json CHANGED
@@ -82,5 +82,22 @@
82
82
  "Delete": "削除",
83
83
  "Add to the bottom": "一番下に追加",
84
84
  "Preview": "プレビュー",
85
- "Mobile": "モバイル"
85
+ "Mobile": "モバイル",
86
+ "Demo Content": "デモコンテンツ",
87
+ "Demo Description": "軽量で無料のVue Click & Dropページビルダーをご紹介します。Vueを使用してデジタル体験を簡単に作成および強化します。強力なものすべてが複雑である必要はありません。このミニマリストで軽量なページビルダーは、シンプルさとスピードに焦点を当てたエレガントで直感的なインターフェイスを提供します。リスト、求人ボード、またはブログ投稿など、完全にレスポンシブなページを作成し、無料のClick & Dropページビルダーを使用してコンテンツを簡単に管理します。",
88
+ "Demo Description Two": "成長のために設計されたページビルダー。完全にカスタマイズ可能で常に応答性があり、あらゆるニーズに対応するように設計された既製のコンポーネントを使用して、ウェブサイトのページを作成します。成長中の商人、ブランド、代理店のための強力なページビルダー。",
89
+ "Demo Description Three": "��ザイナーに愛されているウェブサイトビルダー。あらゆる画面サイズに合わせてレイアウトを簡単にデザイン、プレビュー、調整できます。クリーン。高速。直感的。強力なものすべてが複雑に見える必要はありません。",
90
+ "Demo Description Four": "すべてのデバイスでサイトが見栄えよく表示されるようにします。テキストコンテンツをライブおよびリアルタイムで編集します。あなたのスタイルに合った完璧なフォントを選択してください。変更を元に戻す機能で自信を持って実験してください。プレフィックス付きのスタイル。ビルダーとアプリの間でスタイルの���合のリスクはありません。",
91
+ "Demo Title": "素晴らしいページのためのウェブビルダー",
92
+ "Demo Title Two": "Vueで公開するだけ",
93
+ "Demo Title Three": "レスポンシブ編集",
94
+ "Edit text and links": "テキストとリンクを編集",
95
+ "Enter URL": "URLを入力",
96
+ "Line break": "改行",
97
+ "Bold": "太字",
98
+ "Link": "リンク",
99
+ "Header 2": "ヘッダー2",
100
+ "Header 3": "ヘッダー3",
101
+ "List": "リスト",
102
+ "Add a valid URL to transform the selected text into a clickable hyperlink that directs users to the specified web address.": "選択したテキストをクリック可能なハイパーリンクに変換するために有効なURLを追加してください。"
86
103
  }
package/src/locales/pt.json CHANGED
@@ -82,5 +82,22 @@
82
82
  "Delete": "Excluir",
83
83
  "Add to the bottom": "Adicionar ao final",
84
84
  "Preview": "Pré-visualização",
85
- "Mobile": "Celular"
85
+ "Mobile": "Celular",
86
+ "Demo Content": "Conteúdo de demonstração",
87
+ "Demo Description": "Apresentando o construtor de páginas leve e gratuito Vue Click & Drop. Crie e melhore experiências digitais sem esforço com Vue. Nem tudo que é poderoso precisa ser complexo. Este construtor de páginas minimalista e leve oferece uma interface elegante e intuitiva focada na simplicidade e velocidade. Crie páginas totalmente responsivas, como listas, quadros de empregos ou postagens de blog, e gerencie seu conteúdo com facilidade usando o construtor de páginas gratuito Click & Drop.",
88
+ "Demo Description Two": "Um construtor de páginas projetado para o crescimento. Crie as páginas do seu site com componentes prontos que são totalmente personalizáveis e sempre responsivos, projetados para atender a todas as necessidades. Um poderoso construtor de páginas para comerciantes, marcas e agências em crescimento.",
89
+ "Demo Description Three": "O construtor de sites amado pelos designers. Projete, visualize e ajuste facilmente layouts para cada tamanho de tela. Limpo. Rápido. Intuitivo. Nem tudo que é poderoso precisa parecer complicado.",
90
+ "Demo Description Four": "Garanta que seu site tenha uma ótima aparência em todos os dispositivos. Edite o conteúdo do texto ao vivo e em tempo real. Escolha as fontes perfeitas para combinar com seu estilo. Experimente com confiança com a capacidade de reverter as alterações. Estilos prefixados. Nenhum risco de conflitos de estilo entre o construtor e seu aplicativo.",
91
+ "Demo Title": "O construtor de sites para páginas impressionantes",
92
+ "Demo Title Two": "Basta publicá-lo com Vue",
93
+ "Demo Title Three": "Edição responsiva",
94
+ "Edit text and links": "Editar texto e links",
95
+ "Enter URL": "Inserir URL",
96
+ "Line break": "Quebra de linha",
97
+ "Bold": "Negrito",
98
+ "Link": "Link",
99
+ "Header 2": "Cabeçalho 2",
100
+ "Header 3": "Cabeçalho 3",
101
+ "List": "Lista",
102
+ "Add a valid URL to transform the selected text into a clickable hyperlink that directs users to the specified web address.": "Adicione um URL válido para transformar o texto selecionado em um hyperlink clicável que direciona os usuários para o endereço da web especificado."
86
103
  }
package/src/locales/ru.json CHANGED
@@ -82,5 +82,22 @@
82
82
  "Delete": "Удалить",
83
83
  "Add to the bottom": "Добавить в конец",
84
84
  "Preview": "Предварительный просмотр",
85
- "Mobile": "Мобильный"
85
+ "Mobile": "Мобильный",
86
+ "Demo Content": "Демонстрационный контент",
87
+ "Demo Description": "Представляем легкий и бесплатный Vue Click & Drop Page Builder. Создавайте и улучшайте цифровые впечатления с помощью Vue. Не все мощное должно быть сложным. Этот минималистичный и легкий конструктор страниц предлагает элегантный, интуитивно понятный интерфейс, ориентированный на простоту и скорость. Создавайте полностью адаптивные страницы, такие как списки, доски объявлений или блоги, и легко управляйте своим контентом с помощью бесплатного Click & Drop Page Builder.",
88
+ "Demo Description Two": "Конструктор страниц, созданный для роста. Создавайте страницы вашего сайта с готовыми компонентами, которые полностью настраиваются и всегда адаптивны, разработаны для удовлетворения любых потребностей. Мощный конструктор страниц для растущих торговцев, брендов и агентств.",
89
+ "Demo Description Three": "Конструктор сайтов, любимый дизайнерами. Легко проектируйте, просматривайте и настраивайте макеты для каждого размера экрана. Чистый. Быстрый. Интуитивно понятный. Не все мощное должно выглядеть сложным.",
90
+ "Demo Description Four": "Убедитесь, что ваш сайт отлично выглядит на всех устройствах. Редактируйте текстовый контент вживую и в режиме реального времени. Выбирайте идеальные шрифты, соответствующие вашему стилю. Уверенно экспериментируйте с возможностью отмены изменений. Стили с префиксами. Нет риска конфликтов стилей между конструктором и вашим приложением.",
91
+ "Demo Title": "Веб-конструктор для потрясающих страниц",
92
+ "Demo Title Two": "Просто опубликуйте это с помощью Vue",
93
+ "Demo Title Three": "Адаптивное редактирование",
94
+ "Edit text and links": "Редактировать текст и ссылки",
95
+ "Enter URL": "Введите URL",
96
+ "Line break": "Разрыв строки",
97
+ "Bold": "Жирный",
98
+ "Link": "Ссылка",
99
+ "Header 2": "Заголовок 2",
100
+ "Header 3": "Заголовок 3",
101
+ "List": "Список",
102
+ "Add a valid URL to transform the selected text into a clickable hyperlink that directs users to the specified web address.": "Добавьте действительный URL, чтобы преобразовать выделенный текст в кликабельную гиперссылку, которая направляет пользователей на указанный веб-адрес."
86
103
  }
package/src/locales/zh-Hans.json CHANGED
@@ -82,5 +82,22 @@
82
82
  "Delete": "删除",
83
83
  "Add to the bottom": "添加到底部",
84
84
  "Preview": "预览",
85
- "Mobile": "移动"
85
+ "Mobile": "移动",
86
+ "Demo Content": "演示内容",
87
+ "Demo Description": "介绍轻量级和免费的Vue Click & Drop页面构建器。使用Vue轻松创建和增强数字体验。并非所有强大的东西都需要复杂。这款简约轻便的页面构建器提供了一个优雅直观的界面，专注于简单性和速度。创建完全响应式的页面，例如列表、职位板或博客文章，并使用免费的Click & Drop页面构建器轻松管理您的内容。",
88
+ "Demo Title": "令人惊叹的页面的网页构建器",
89
+ "Demo Description Two": "为增长而设计的页面构建器。使用完全可定制且始终响应的现成组件构建您的网站页面，旨在满足所有需求。为不断发展的商家、品牌和代理商提供强大的页面构建器。",
90
+ "Demo Description Three": "设计师喜爱的网站构建器。轻松设计、预览和调整每个屏幕尺寸的布局。干净。快速。直观。并非所有强大的东西都必须看起来很复杂。",
91
+ "Demo Description Four": "确保您的网站在所有设备上看起来都很棒。实时编辑文本内容。选择与您的风格相匹配的完美字体。自信地进行实验，并能够轻松复更改。样式前缀。构建器和您的应用程序之间没有样式冲突的风险。",
92
+ "Demo Title Two": "只需使用Vue发布即可",
93
+ "Demo Title Three": "响应式编辑",
94
+ "Edit text and links": "编辑文本和链接",
95
+ "Enter URL": "输入URL",
96
+ "Line break": "换行",
97
+ "Bold": "加粗",
98
+ "Link": "链接",
99
+ "Header 2": "标题2",
100
+ "Header 3": "标题3",
101
+ "List": "列表",
102
+ "Add a valid URL to transform the selected text into a clickable hyperlink that directs users to the specified web address.": "添加一个有效的URL，将选定的文本转换为可点击的超链接，指向指定的网页地址。"
86
103
  }
package/src/services/PageBuilderService.ts CHANGED
@@ -437,42 +437,35 @@ export class PageBuilderService {
437
437
  if (!this.pendingMountComponents) {
438
438
  // Page Builder Is initially present in DOM
439
439
  if (!passedComponentsArray && this.isPageBuilderMissingOnStart && localStorageData) {
440
- console.log('1111:', internalPageBuilderCall)
441
440
  await this.completeMountProcess(localStorageData)
442
441
  return
443
442
  }
444
443
  if (passedComponentsArray && !localStorageData) {
445
- console.log('2222:', internalPageBuilderCall)
446
444
  await this.completeMountProcess(JSON.stringify(passedComponentsArray), true)
447
445
  this.saveDomComponentsToLocalStorage()
448
446
  return
449
447
  }
450
448
 
451
449
  if (passedComponentsArray && localStorageData) {
452
- console.log('3333:', internalPageBuilderCall)
453
450
  this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
454
451
  await this.completeMountProcess(JSON.stringify(passedComponentsArray), true)
455
452
  return
456
453
  }
457
454
  if (!passedComponentsArray && localStorageData && !this.savedMountComponents) {
458
- console.log('4444:', internalPageBuilderCall)
459
455
  await this.completeMountProcess(localStorageData)
460
456
  return
461
457
  }
462
458
  if (!passedComponentsArray && this.savedMountComponents && localStorageData) {
463
- console.log('5555:', internalPageBuilderCall)
464
459
  await this.completeMountProcess(JSON.stringify(this.savedMountComponents))
465
460
  return
466
461
  }
467
462
 
468
463
  if (!passedComponentsArray && !localStorageData && this.isPageBuilderMissingOnStart) {
469
- console.log('6666:', internalPageBuilderCall)
470
464
  await this.completeMountProcess(JSON.stringify([]))
471
465
  return
472
466
  }
473
467
 
474
468
  if (!this.isPageBuilderMissingOnStart && !localStorageData && !passedComponentsArray) {
475
- console.log('7777:', internalPageBuilderCall)
476
469
  await this.completeMountProcess(JSON.stringify([]))
477
470
  return
478
471
  }
@@ -482,7 +475,6 @@ export class PageBuilderService {
482
475
  if (this.pendingMountComponents) {
483
476
  // No Page Builder Is present in DOM initially
484
477
  if (localStorageData && this.isPageBuilderMissingOnStart) {
485
- console.log('8888:', internalPageBuilderCall)
486
478
  await this.completeMountProcess(JSON.stringify(this.pendingMountComponents), true)
487
479
  await delay(400)
488
480
  this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
@@ -490,14 +482,12 @@ export class PageBuilderService {
490
482
  return
491
483
  }
492
484
  if (!localStorageData && passedComponentsArray && this.isPageBuilderMissingOnStart) {
493
- console.log('9999:', internalPageBuilderCall)
494
485
  await this.completeMountProcess(JSON.stringify(this.pendingMountComponents), true)
495
486
  this.saveDomComponentsToLocalStorage()
496
487
  return
497
488
  }
498
489
 
499
490
  if (!passedComponentsArray && !localStorageData && this.isPageBuilderMissingOnStart) {
500
- console.log('10000:', internalPageBuilderCall)
501
491
  await this.completeMountProcess(JSON.stringify(this.pendingMountComponents), true)
502
492
  this.saveDomComponentsToLocalStorage()
503
493
  return
@@ -693,10 +683,10 @@ export class PageBuilderService {
693
683
 
694
684
  // Apply responsive font size classes based on heading type
695
685
  if (heading.tagName === 'H2') {
696
- element.classList.add('pbx-text-2xl', 'lg:pbx-text-4xl')
686
+ element.classList.add('pbx-text-2xl', 'lg:pbx-text-4xl', 'pbx-font-medium')
697
687
  }
698
688
  if (heading.tagName === 'H3') {
699
- element.classList.add('pbx-text-1xl', 'lg:pbx-text-3xl')
689
+ element.classList.add('pbx-text-1xl', 'lg:pbx-text-3xl', 'pbx-font-medium')
700
690
  }
701
691
  }
702
692
  }
@@ -1580,7 +1570,7 @@ export class PageBuilderService {
1580
1570
  localStorage.removeItem(key)
1581
1571
  }
1582
1572
  }
1583
- } catch (e) {
1573
+ } catch {
1584
1574
  // Ignore parse errors for unrelated keys
1585
1575
  }
1586
1576
  }
package/src/tests/PageBuilderTest.vue CHANGED
@@ -3,24 +3,32 @@ import FullWidthElement from '../Components/Layouts/FullWidthElement.vue'
3
3
  import PageBuilder from '../PageBuilder/PageBuilder.vue'
4
4
  import DemoMediaLibraryComponentTest from '../tests/TestComponents/DemoMediaLibraryComponentTest.vue'
5
5
  import DemoBuilderComponentsTest from '../tests/TestComponents/DemoBuilderComponentsTest.vue'
6
- import { onMounted } from 'vue'
6
+ import { onMounted, computed, watch } from 'vue'
7
7
  import componentsArray from '../tests/componentsArray.test.json'
8
8
  import { getPageBuilder } from '../composables/builderInstance'
9
9
  import { useTranslations } from '../composables/useTranslations'
10
10
 
11
11
  const pageBuilderService = getPageBuilder()
12
- const { translate } = useTranslations()
12
+ const { translate, currentTranslations } = useTranslations()
13
13
 
14
14
  const publishPageBuilder = function () {}
15
15
 
16
- // Convert componentsArray to HTML string
17
- const htmlString =
18
- '<div id="pagebuilder" class="" style="">' +
19
- componentsArray.map((c) => c.html_code).join('\n') +
20
- '</div>'
16
+ const translatedComponents = computed(() => {
17
+ return componentsArray.map((component) => {
18
+ const newComponent = { ...component }
19
+ newComponent.html_code = newComponent.html_code.replace(
20
+ /{{\s*translate\('([^']+)'\)\s*}}/g,
21
+ (_, key) => translate(key),
22
+ )
23
+ return newComponent
24
+ })
25
+ })
21
26
 
22
- // Parse as HTML (not JSON)
23
- const { components, pageSettings } = pageBuilderService.parsePageBuilderHTML(htmlString)
27
+ const { components, pageSettings } = pageBuilderService.parsePageBuilderHTML(
28
+ '<div id="pagebuilder" class="" style="">' +
29
+ translatedComponents.value.map((c) => c.html_code).join('\n') +
30
+ '</div>',
31
+ )
24
32
 
25
33
  const configPageBuilder = {
26
34
  userForPageBuilder: {
@@ -54,6 +62,22 @@ const configPageBuilder = {
54
62
  pageSettings: pageSettings,
55
63
  } as const
56
64
 
65
+ watch(currentTranslations, async () => {
66
+ const { components: newComponents, pageSettings: newPageSettings } =
67
+ pageBuilderService.parsePageBuilderHTML(
68
+ '<div id="pagebuilder" class="" style="">' +
69
+ translatedComponents.value.map((c) => c.html_code).join('\n') +
70
+ '</div>',
71
+ )
72
+
73
+ const newConfig = {
74
+ ...configPageBuilder,
75
+ pageSettings: newPageSettings,
76
+ }
77
+
78
+ await pageBuilderService.startBuilder(newConfig, newComponents)
79
+ })
80
+
57
81
  onMounted(async () => {
58
82
  const result = await pageBuilderService.startBuilder(configPageBuilder, components)
59
83
  console.log('Page Builder result for message, status, or error::', result)
@@ -98,7 +122,7 @@ onMounted(async () => {
98
122
  </p>
99
123
  </div>
100
124
  </div>
101
- <div class="pbx-m-4">
125
+ <div class="lg:pbx-m-2 pbx-m-1">
102
126
  <!-- :CustomBuilderComponents="DemoBuilderComponentsTest" -->
103
127
  <PageBuilder
104
128
  :CustomMediaLibraryComponent="DemoMediaLibraryComponentTest"
package/src/tests/componentsArray.test.json CHANGED
@@ -1,11 +1,11 @@
1
1
  [
2
2
  {
3
- "html_code": "<section data-componentid=\"ba0e9774-3779-467c-9c9f-5c95dd47fa6d\" data-component-title=\"Header H2\"><div class=\"pbx-relative pbx-py-4\"><div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-break-words pbx-text-6xl lg:pbx-text-8xl\"><h2><strong>Demo Content</strong></h2></div></div></div></section>",
3
+ "html_code": "<section data-componentid=\"ba0e9774-3779-467c-9c9f-5c95dd47fa6d\" data-component-title=\"Header H2\"><div class=\"pbx-relative pbx-py-4\"><div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-break-words pbx-text-6xl lg:pbx-text-8xl pbx-font-medium\"><h2>{{ translate('Demo Content') }}</h2></div></div></div></section>",
4
4
  "id": "ba0e9774-3779-467c-9c9f-5c95dd47fa6d",
5
5
  "title": "Header H2"
6
6
  },
7
7
  {
8
- "html_code": "<section data-componentid=\"d9fe6bdb-60df-45e4-bed5-1a6f8edf28e5\" data-component-title=\"Text\">\n <div class=\"pbx-relative pbx-py-4\">\n <div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\">\n <div><p>Introducing the The Lightweight Free Vue Click &amp; Drop Page Builder create and enhance digital experiences with Vue. Not everything powerful has to look complicated. Lightweight &amp; Minimalist Page Builder with an elegant and intuitive design, focused on simplicity and speed. Build responsive pages like listings, jobs or blog posts and manage content easily using the free Click &amp; Drop Page Builder.</p></div>\n </div>\n </div>\n </section>",
8
+ "html_code": "<section data-componentid=\"d9fe6bdb-60df-45e4-bed5-1a6f8edf28e5\" data-component-title=\"Text\">\n <div class=\"pbx-relative pbx-py-4\">\n <div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\">\n <div><p>{{ translate('Demo Description') }}</p></div>\n </div>\n </div>\n </section>",
9
9
  "id": "d9fe6bdb-60df-45e4-bed5-1a6f8edf28e5",
10
10
  "title": "Text"
11
11
  },
@@ -15,12 +15,12 @@
15
15
  "title": "3 Vertical Images"
16
16
  },
17
17
  {
18
- "html_code": "<section data-componentid=\"cd7e27ac-b152-4714-a5f7-5ad660f183bf\" data-component-title=\"Header H3\"><div class=\"pbx-relative pbx-py-4\"><div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-break-words pbx-mt-6 pbx-font-medium pbx-text-2xl lg:pbx-text-4xl\"><h3>The web builder for stunning pages</h3></div></div></div></section>",
18
+ "html_code": "<section data-componentid=\"cd7e27ac-b152-4714-a5f7-5ad660f183bf\" data-component-title=\"Header H3\"><div class=\"pbx-relative pbx-py-4\"><div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-break-words pbx-mt-6 pbx-font-medium pbx-text-2xl lg:pbx-text-4xl\"><h3>{{ translate('Demo Title') }}</h3></div></div></div></section>",
19
19
  "id": "cd7e27ac-b152-4714-a5f7-5ad660f183bf",
20
20
  "title": "Header H3"
21
21
  },
22
22
  {
23
- "html_code": "<section data-componentid=\"b1e75d09-0e72-4c61-a207-a97277cbbfed\" data-component-title=\"Text\">\n <div class=\"pbx-relative pbx-py-4\">\n <div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\">\n <div><p>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></div>\n </div>\n </div>\n </section>",
23
+ "html_code": "<section data-componentid=\"b1e75d09-0e72-4c61-a207-a97277cbbfed\" data-component-title=\"Text\">\n <div class=\"pbx-relative pbx-py-4\">\n <div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\">\n <div><p>{{ translate('Demo Description Two') }}</p></div>\n </div>\n </div>\n </section>",
24
24
  "id": "b1e75d09-0e72-4c61-a207-a97277cbbfed",
25
25
  "title": "Text"
26
26
  },
@@ -30,12 +30,12 @@
30
30
  "title": "2 Vertical Images"
31
31
  },
32
32
  {
33
- "html_code": "<section data-componentid=\"f164929b-4460-4b17-9933-119b47e8bbef\" data-component-title=\"Header H3\"><div class=\"pbx-relative pbx-py-4\"><div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-break-words pbx-mt-6 pbx-font-medium pbx-text-2xl lg:pbx-text-4xl\"><h3>Just publish it with Vue</h3></div></div></div></section>",
33
+ "html_code": "<section data-componentid=\"f164929b-4460-4b17-9933-119b47e8bbef\" data-component-title=\"Header H3\"><div class=\"pbx-relative pbx-py-4\"><div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-break-words pbx-mt-6 pbx-font-medium pbx-text-2xl lg:pbx-text-4xl\"><h3>{{ translate('Demo Title Two') }}</h3></div></div></div></section>",
34
34
  "id": "f164929b-4460-4b17-9933-119b47e8bbef",
35
35
  "title": "Header H3"
36
36
  },
37
37
  {
38
- "html_code": "<section data-componentid=\"fa721207-2444-4892-9de3-5260d576a34b\" data-component-title=\"Text\">\n <div class=\"pbx-relative pbx-py-4\">\n <div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\">\n <div class=\"\"><p>The website builder loved by designers. Easily design, preview, and adjust layouts for every screen size.<br>Clean. Fast. Intuitive. Not everything powerful has to look complicated.</p></div>\n </div>\n </div>\n </section>",
38
+ "html_code": "<section data-componentid=\"fa721207-2444-4892-9de3-5260d576a34b\" data-component-title=\"Text\">\n <div class=\"pbx-relative pbx-py-4\">\n <div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\">\n <div class=\"\"><p>{{ translate('Demo Description Three') }}</p></div>\n </div>\n </div>\n </section>",
39
39
  "id": "fa721207-2444-4892-9de3-5260d576a34b",
40
40
  "title": "Text"
41
41
  },
@@ -45,12 +45,12 @@
45
45
  "title": "YouTube Video"
46
46
  },
47
47
  {
48
- "html_code": "<section data-componentid=\"de2208e1-5b65-4302-8ffb-b9beb7d192d7\" title=\"Header H3\" data-component-title=\"Header H3\"><div class=\"pbx-relative pbx-py-4\"><div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-break-words pbx-text-2xl lg:pbx-text-4xl pbx-font-medium\"><h3><strong>Responsive Editing</strong></h3></div></div></div></section>",
48
+ "html_code": "<section data-componentid=\"de2208e1-5b65-4302-8ffb-b9beb7d192d7\" title=\"Header H3\" data-component-title=\"Header H3\"><div class=\"pbx-relative pbx-py-4\"><div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-break-words pbx-text-2xl lg:pbx-text-4xl pbx-font-medium\"><h3>{{ translate('Demo Title Three') }}</h3></div></div></div></section>",
49
49
  "id": "de2208e1-5b65-4302-8ffb-b9beb7d192d7",
50
50
  "title": "Header H3"
51
51
  },
52
52
  {
53
- "html_code": "<section data-componentid=\"e9a5c794-5972-473d-8181-af4345cbaabe\" title=\"Text\" data-component-title=\"Text\">\n <div class=\"pbx-relative pbx-py-4\">\n <div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\">\n <div><p>Ensure your site looks great on all devices. Edit text content live and in real-time. Choose the perfect fonts to match your style. Experiment confidently with the ability to revert changes. Styles Prefixed. No risk of style conflicts between the builder and your app.</p><p></p></div>\n </div>\n </div>\n </section>",
53
+ "html_code": "<section data-componentid=\"e9a5c794-5972-473d-8181-af4345cbaabe\" title=\"Text\" data-component-title=\"Text\">\n <div class=\"pbx-relative pbx-py-4\">\n <div class=\"pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2\">\n <div><p>{{ translate('Demo Description Four') }}</p><p></p></div>\n </div>\n </div>\n </section>",
54
54
  "id": "e9a5c794-5972-473d-8181-af4345cbaabe",
55
55
  "title": "Text"
56
56
  },