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

package/dist/zh-Hans-notf0z2N.js

@@ -0,0 +1,112 @@
+const e = "保存", o = "选项", t = "头像", n = "发布", s = "关闭", a = "组件", i = "样式", r = "排版", l = "选择", d = "内边距", p = "边距", u = "全局", c = "具体", g = "边框", y = "透明", h = "添加", m = "属性", S = "值", C = "关闭", f = "编辑", w = "删除", T = "预览", b = "移动", v = {
+  "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: e,
+  "Add new Components": "添加新组件",
+  Options: o,
+  "Config Overview": "配置概览",
+  "HTML Overview": "HTML概览",
+  "Delete Layout": "删除布局",
+  avatar: t,
+  Publish: n,
+  "Add Components to Page": "将组件添加到页面",
+  Close: s,
+  "Helper Components": "辅助组件",
+  "Click to add": "点击添加",
+  component: a,
+  "Layout Components": "布局组件",
+  "Click to add component": "点击添加组件",
+  "Remove all Components": "删除所有组件",
+  "Are you sure you want to remove all Components?": "您确定要删除所有组件吗？",
+  Styles: i,
+  "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: r,
+  "Font Appearance": "字体外观",
+  "Font Size": "字体大小",
+  Select: l,
+  "Font size": "字体大小",
+  "Font tablet size": "平板字体大小",
+  "Font small screens": "小屏幕字体大小",
+  "Font weight": "字体粗细",
+  "Font family": "字体家族",
+  "Font Style": "字体样式",
+  "Opacity & Transparency": "不透明度和透明度",
+  Padding: d,
+  "Vertical Padding": "垂直内边距",
+  "Horizontal Padding": "水平内边距",
+  Margin: p,
+  "Vertical Margin": "垂直边距",
+  "Horizontal Margin": "水平边距",
+  "Border Radius": "边框半径",
+  Global: u,
+  Specific: c,
+  "Border Radius top left": "边框半径 左上",
+  "Border Radius top right": "边框半径 右上",
+  "Border Radius bottom left": "边框半径 左下",
+  "Border Radius bottom right": "边框半径 右下",
+  "Border Style, Width & Color": "边框样式、宽度和颜色",
+  Border: g,
+  "Border Style": "边框样式",
+  "Border Width": "边框宽度",
+  "Border Color": "边框颜色",
+  Transparent: y,
+  "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: h,
+  "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: m,
+  value: S,
+  close: C,
+  Editing: f,
+  "Loading...": "加载中...",
+  "Background Color": "背景颜色",
+  "Text Color": "文字颜色",
+  "Default black": "默认黑色",
+  "Remove Component?": "删除组件？",
+  "Are you sure you want to remove this Component?": "您确定要删除此组件吗？",
+  Delete: w,
+  "Add to the bottom": "添加到底部",
+  Preview: T,
+  Mobile: b
+};
+export {
+  h as Add,
+  g as Border,
+  s as Close,
+  w as Delete,
+  f as Editing,
+  u as Global,
+  p as Margin,
+  b as Mobile,
+  o as Options,
+  d as Padding,
+  T as Preview,
+  n as Publish,
+  e as Save,
+  l as Select,
+  c as Specific,
+  i as Styles,
+  y as Transparent,
+  r as Typographies,
+  t as avatar,
+  C as close,
+  a as component,
+  v as default,
+  m as property,
+  S as value
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.3.72",
+  "version": "3.3.74",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

package/src/App.vue

@@ -1,7 +1,23 @@
-<script setup>
+<script setup lang="ts">
+import { onMounted, computed } from 'vue'
 import Navbar from './Components/Homepage/Navbar.vue'
 import PageBuilderTest from './tests/PageBuilderTest.vue'
 import Footer from './Components/Homepage/Footer.vue'
+import { useTranslations } from './composables/useTranslations'
+import { sharedPageBuilderStore } from './stores/shared-store'
+
+const { loadTranslations } = useTranslations()
+
+const pageBuilderStateStore = sharedPageBuilderStore
+
+const getCurrentLanguage = computed(() => {
+  return pageBuilderStateStore.getCurrentLanguage
+})
+
+onMounted(async () => {
+  const language = getCurrentLanguage.value || 'en'
+  await loadTranslations(language)
+})
 </script>
 
 <template>

package/src/Components/PageBuilder/DefaultComponents/DefaultBuilderComponents.vue

@@ -5,6 +5,11 @@ import { usePageBuilderModal } from '../../../composables/usePageBuilderModal'
 import { generateComponentPreview } from '../../../utils/componentPreviews'
 import type { ComponentObject } from '../../../types'
 import { getPageBuilder } from '../../../composables/builderInstance'
+
+import { useTranslations } from '../../../composables/useTranslations'
+
+const { translate } = useTranslations()
+
 const pageBuilderService = getPageBuilder()
 
 defineProps({
@@ -46,7 +51,7 @@ const getSvgPreview = (title: string) => {
   <div>
     <!-- Helper Components Section -->
     <div class="pbx-mb-8">
-      <h3 class="pbx-myQuaternaryHeader pbx-mb-4">Helper Components</h3>
+      <h3 class="pbx-myQuaternaryHeader pbx-mb-4">{{ translate('Helper Components') }}</h3>
       <div
         class="pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 lg:pbx-grid-cols-4 pbx-gap-4"
       >
@@ -61,7 +66,8 @@ const getSvgPreview = (title: string) => {
             <h4 class="pbx-myPrimaryParagraph pbx-text-base pbx-font-medium">{{ helper.title }}</h4>
           </div>
           <div class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-pt-2">
-            Click to add {{ helper.title.toLowerCase() }} component
+            {{ translate('Click to add') }} {{ helper.title.toLowerCase() }}
+            {{ translate('component') }}
           </div>
         </div>
       </div>
@@ -69,7 +75,7 @@ const getSvgPreview = (title: string) => {
 
     <!-- Regular Components Section -->
     <div v-if="customMediaComponent">
-      <h3 class="pbx-myQuaternaryHeader pbx-mb-4">Layout Components</h3>
+      <h3 class="pbx-myQuaternaryHeader pbx-mb-4">{{ translate('Layout Components') }}</h3>
       <div class="pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 pbx-gap-4">
         <div
           v-for="comp in components[0].components.data"
@@ -89,7 +95,7 @@ const getSvgPreview = (title: string) => {
           <div class="pbx-p-3">
             <h4 class="pbx-myPrimaryParagraph pbx-text-sm pbx-font-normal">{{ comp.title }}</h4>
             <div class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-pt-2">
-              Click to add component
+              {{ translate('Click to add component') }}
             </div>
           </div>
         </div>

package/src/Components/PageBuilder/EditorMenu/Editables/BackgroundColorEditor.vue

@@ -4,6 +4,10 @@ import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headless
 import tailwindColors from '../../../../utils/builder/tailwaind-colors'
 import { sharedPageBuilderStore } from '../../../../stores/shared-store'
 import { getPageBuilder } from '../../../../composables/builderInstance'
+import { useTranslations } from '../../../../composables/useTranslations'
+
+const { translate } = useTranslations()
+
 const pageBuilderService = getPageBuilder()
 
 // Use shared store instance
@@ -49,7 +53,7 @@ watch(
               class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border pbx-border-gray-800 pbx-rounded-sm"
               :class="`pbx-bg-${backgroundColor?.replace('pbx-bg-', '')}`"
             ></div>
-            <div>Background Color</div>
+            <div>{{ translate('Background Color') }}</div>
           </div>
 
           <span v-if="globalPageLayout" class="material-symbols-outlined"> chevron_right </span>
@@ -99,7 +103,7 @@ watch(
             >
               <div v-if="color === 'none'" class="pbx-flex pbx-items-center">
                 <span class="material-symbols-outlined"> ev_shadow </span>
-                <span class="pbx-ml-3">Transparent</span>
+                <span class="pbx-ml-3">{{ translate('Transparent') }}</span>
               </div>
               <div v-if="color !== 'none'" class="pbx-flex pbx-items-center">
                 <div

package/src/Components/PageBuilder/EditorMenu/Editables/BorderRadius.vue

@@ -4,6 +4,9 @@ import { sharedPageBuilderStore } from '../../../../stores/shared-store'
 import EditorAccordion from '../EditorAccordion.vue'
 import tailwindBorderRadius from '../../../../utils/builder/tailwind-border-radius'
 import { getPageBuilder } from '../../../../composables/builderInstance'
+import { useTranslations } from '../../../../composables/useTranslations'
+
+const { translate } = useTranslations()
 const pageBuilderService = getPageBuilder()
 
 const pageBuilderStateStore = sharedPageBuilderStore
@@ -73,18 +76,22 @@ watch(
 
 <template>
   <EditorAccordion>
-    <template #title>Border Radius</template>
+    <template #title>{{ translate('Border Radius') }}</template>
     <template #content>
-      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">Global</p>
+      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">
+        {{ translate('Global') }}
+      </p>
       <div class="pbx-my-2 pbx-py-2">
-        <label for="global-border-radius" class="pbx-myPrimaryInputLabel"> Border Radius </label>
+        <label for="global-border-radius" class="pbx-myPrimaryInputLabel">{{
+          translate('Border Radius')
+        }}</label>
         <select
           id="global-border-radius"
           v-model="borderRadiusGlobal"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleBorderRadiusGlobal(borderRadiusGlobal)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ translate('Select') }}</option>
           <option
             v-for="borderRadiusGlobal in tailwindBorderRadius.roundedGlobal"
             :key="borderRadiusGlobal"
@@ -93,10 +100,13 @@ watch(
           </option>
         </select>
       </div>
-      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">Specific</p>
+      <hr />
+      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">
+        {{ translate('Specific') }}
+      </p>
       <div class="pbx-my-2 pbx-py-2">
         <label for="border-radius-top-left" class="pbx-myPrimaryInputLabel">
-          Border Radius top left
+          {{ translate('Border Radius top left') }}
         </label>
         <select
           id="border-radius-top-left"
@@ -104,7 +114,7 @@ watch(
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleBorderRadiusTopLeft(borderRadiusTopLeft)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ translate('Select') }}</option>
           <option
             v-for="borderRadiusTopLeft in tailwindBorderRadius.roundedTopLeft"
             :key="borderRadiusTopLeft"
@@ -115,7 +125,7 @@ watch(
       </div>
       <div class="pbx-my-2 pbx-py-2">
         <label for="border-radius-top-right" class="pbx-myPrimaryInputLabel">
-          Border Radius top right
+          {{ translate('Border Radius top right') }}
         </label>
         <select
           id="border-radius-top-right"
@@ -123,7 +133,7 @@ watch(
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleBorderRadiusTopRight(borderRadiusTopRight)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ translate('Select') }}</option>
           <option
             v-for="borderRadiusTopRight in tailwindBorderRadius.roundedTopRight"
             :key="borderRadiusTopRight"
@@ -134,7 +144,7 @@ watch(
       </div>
       <div class="pbx-my-2 pbx-py-2">
         <label for="border-radius-bottom-left" class="pbx-myPrimaryInputLabel">
-          Border Radius bottom left
+          {{ translate('Border Radius bottom left') }}
         </label>
         <select
           id="border-radius-bottom-left"
@@ -142,7 +152,7 @@ watch(
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleBorderRadiusBottomleft(borderRadiusBottomleft)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ translate('Select') }}</option>
           <option
             v-for="borderRadiusBottomleft in tailwindBorderRadius.roundedBottomLeft"
             :key="borderRadiusBottomleft"
@@ -153,7 +163,7 @@ watch(
       </div>
       <div class="pbx-my-2 pbx-py-2">
         <label for="border-radius-bottom-right" class="pbx-myPrimaryInputLabel">
-          Border Radius bottom right
+          {{ translate('Border Radius bottom right') }}
         </label>
         <select
           id="border-radius-bottom-right"
@@ -161,7 +171,7 @@ watch(
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleBorderRadiusBottomRight(borderRadiusBottomRight)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ translate('Select') }}</option>
           <option
             v-for="borderRadiusBottomRight in tailwindBorderRadius.roundedBottomRight"
             :key="borderRadiusBottomRight"

package/src/Components/PageBuilder/EditorMenu/Editables/Borders.vue

@@ -6,6 +6,9 @@ import tailwindColors from '../../../../utils/builder/tailwaind-colors'
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
 import { sharedPageBuilderStore } from '../../../../stores/shared-store'
 import { getPageBuilder } from '../../../../composables/builderInstance'
+import { useTranslations } from '../../../../composables/useTranslations'
+
+const { translate } = useTranslations()
 const pageBuilderService = getPageBuilder()
 
 // Use shared store instance
@@ -52,19 +55,23 @@ watch(
 
 <template>
   <EditorAccordion>
-    <template #title>Border Style, Width & Color</template>
+    <template #title>{{ translate('Border Style, Width & Color') }}</template>
     <template #content>
-      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">Border</p>
+      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">
+        {{ translate('Border') }}
+      </p>
 
       <div class="pbx-my-2 pbx-py-2">
-        <label for="border-style" class="pbx-myPrimaryInputLabel"> Border Style </label>
+        <label for="border-style" class="pbx-myPrimaryInputLabel">{{
+          translate('Border Style')
+        }}</label>
         <select
           id="border-style"
           v-model="borderStyle"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleBorderStyle(borderStyle)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ translate('Select') }}</option>
           <option
             v-for="borderStyle in tailwindBorderStyleWidthPlusColor.borderStyle"
             :key="borderStyle"
@@ -74,14 +81,16 @@ watch(
         </select>
       </div>
       <div class="pbx-my-2 pbx-py-2">
-        <label for="border-width" class="pbx-myPrimaryInputLabel"> Border Width </label>
+        <label for="border-width" class="pbx-myPrimaryInputLabel">{{
+          translate('Border Width')
+        }}</label>
         <select
           id="border-width"
           v-model="borderWidth"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleBorderWidth(borderWidth)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ translate('Select') }}</option>
           <option
             v-for="borderWidth in tailwindBorderStyleWidthPlusColor.borderWidth"
             :key="borderWidth"
@@ -91,7 +100,9 @@ watch(
         </select>
       </div>
 
-      <label for="border-color" class="pbx-myPrimaryInputLabel"> Border Color </label>
+      <label for="border-color" class="pbx-myPrimaryInputLabel">{{
+        translate('Border Color')
+      }}</label>
       <Listbox as="div" v-model="borderColor">
         <div class="pbx-relative pbx-mt-2">
           <ListboxButton class="pbx-myPrimarySelect" id="border-color">
@@ -121,7 +132,7 @@ watch(
             leave-to-class="pbx-opacity-0"
           >
             <ListboxOptions
-              class="pbx-absolute pbx-z-10 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-white pbx-py-1 pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm list-none p-0 m-0"
+              class="pbx-absolute pbx-z-10 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-white pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm pbx-list-none pbx-p-0 pbx-m-0"
             >
               <ListboxOption
                 as="template"
@@ -151,7 +162,9 @@ watch(
                       class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-bg-gray-950"
                       :class="`pbx-bg-${color.replace('pbx-border-', '')}`"
                     ></div>
-                    <span v-if="color === 'none'" class="pbx-ml-3">Transparent</span>
+                    <span v-if="color === 'none'" class="pbx-ml-3">{{
+                      translate('Transparent')
+                    }}</span>
                     <span v-if="color !== 'none'" class="pbx-ml-3">{{ color }}</span>
                   </div>
                 </li>

package/src/Components/PageBuilder/EditorMenu/Editables/ClassEditor.vue

@@ -3,6 +3,9 @@ import { ref, computed, watch } from 'vue'
 import { sharedPageBuilderStore } from '../../../../stores/shared-store'
 import EditorAccordion from '../EditorAccordion.vue'
 import { getPageBuilder } from '../../../../composables/builderInstance'
+import { useTranslations } from '../../../../composables/useTranslations'
+
+const { translate } = useTranslations()
 
 const pageBuilderService = getPageBuilder()
 
@@ -50,11 +53,14 @@ const handleAddClasses = async () => {
 
 <template>
   <EditorAccordion>
-    <template #title>Generated CSS</template>
+    <template #title>{{ translate('Generated CSS') }}</template>
     <template #content>
       <label class="pbx-myPrimaryInputLabel pbx-my-4">
-        This is the CSS applied by the builder. Add your own CSS and press Enter to apply it to the
-        selected element.
+        {{
+          translate(
+            'This is the CSS applied by the builder. Add your own CSS and press Enter to apply it to the selected element.',
+          )
+        }}
       </label>
 
       <div class="pbx-flex pbx-flex-row pbx-flex-wrap pbx-gap-2 pbx-mt-2 pbx-mb-4">
@@ -79,22 +85,24 @@ const handleAddClasses = async () => {
 
       <div>
         <label for="custom-css" class="pbx-myPrimaryInputLabel">
-          Add your CSS.
+          {{ translate('Add your CSS.') }}
           <br />
-          The pbx- prefix is added automatically.
+          {{ translate('The pbx- prefix is added automatically.') }}
         </label>
         <div class="pbx-flex pbx-gap-2 pbx-item-center">
           <input
             id="custom-css"
             v-model="inputClass"
             type="text"
-            placeholder="Type class"
+            :placeholder="translate('Type class')"
             @keydown.enter="handleAddClasses()"
             autocomplete="off"
             class="pbx-myPrimaryInput"
           />
 
-          <button @click="handleAddClasses" type="button" class="pbx-myPrimaryButton">Add</button>
+          <button @click="handleAddClasses" type="button" class="pbx-myPrimaryButton">
+            {{ translate('Add') }}
+          </button>
         </div>
       </div>
       <p v-if="errorMessage" class="pbx-myPrimaryInputError">{{ errorMessage }}</p>

package/src/Components/PageBuilder/EditorMenu/Editables/ComponentTopMenu.vue

@@ -2,6 +2,10 @@
 import DynamicModalBuilder from '../../../Modals/DynamicModalBuilder.vue'
 import { computed, ref } from 'vue'
 import { getPageBuilder } from '../../../../composables/builderInstance'
+import { useTranslations } from '../../../../composables/useTranslations'
+
+const { translate } = useTranslations()
+
 const pageBuilderService = getPageBuilder()
 
 const showModalDeleteComponent = ref(false)
@@ -23,11 +27,11 @@ const handleDelete = function () {
   showModalDeleteComponent.value = true
   typeModal.value = 'delete'
   gridColumnModal.value = 2
-  titleModal.value = 'Remove Component?'
-  descriptionModal.value = 'Are you sure you want to remove this Component?'
-  firstButtonModal.value = 'Close'
+  titleModal.value = translate('Remove Component?')
+  descriptionModal.value = translate('Are you sure you want to remove this Component?')
+  firstButtonModal.value = translate('Close')
   secondButtonModal.value = null
-  thirdButtonModal.value = 'Delete'
+  thirdButtonModal.value = translate('Delete')
 
   // handle click
   firstModalButtonFunctionDynamicModalBuilder.value = function () {
@@ -74,14 +78,14 @@ const handleDelete = function () {
     <button
       type="button"
       @click="pageBuilderService.reorderComponent(-1)"
-      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"> move_up </span>
     </button>
     <button
       type="button"
       @click="pageBuilderService.reorderComponent(1)"
-      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"> move_down </span>
     </button>

package/src/Components/PageBuilder/EditorMenu/Editables/ManageBackgroundOpacity.vue

@@ -67,7 +67,7 @@ watch(
           leave-to-class="pbx-opacity-0"
         >
           <ListboxOptions
-            class="pbx-absolute pbx-z-10 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-white pbx-py-1 pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm list-none p-0 m-0"
+            class="pbx-absolute pbx-z-10 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-white pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm pbx-list-none pbx-p-0 pbx-m-0"
           >
             <ListboxOption
               as="template"

package/src/Components/PageBuilder/EditorMenu/Editables/ManageOpacity.vue

@@ -66,7 +66,7 @@ watch(
           leave-to-class="pbx-opacity-0"
         >
           <ListboxOptions
-            class="pbx-absolute pbx-z-10 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-white pbx-py-1 pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm list-none p-0 m-0"
+            class="pbx-absolute pbx-z-10 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-white pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm pbx-list-none pbx-p-0 pbx-m-0"
           >
             <ListboxOption
               as="template"

package/src/Components/PageBuilder/EditorMenu/Editables/Margin.vue

@@ -4,6 +4,9 @@ import { sharedPageBuilderStore } from '../../../../stores/shared-store'
 import EditorAccordion from '../EditorAccordion.vue'
 import tailwindPaddingPlusMargin from '../../../../utils/builder/tailwind-padding-margin'
 import { getPageBuilder } from '../../../../composables/builderInstance'
+import { useTranslations } from '../../../../composables/useTranslations'
+
+const { translate } = useTranslations()
 const pageBuilderService = getPageBuilder()
 
 // Use shared store instance
@@ -61,17 +64,19 @@ watch(
 </script>
 <template>
   <EditorAccordion>
-    <template #title>Margin</template>
+    <template #title>{{ translate('Margin') }}</template>
     <template #content>
       <div class="pbx-my-2 pbx-py-2">
-        <label for="vertical-margin" class="pbx-myPrimaryInputLabel"> Vertical Margin </label>
+        <label for="vertical-margin" class="pbx-myPrimaryInputLabel">{{
+          translate('Vertical Margin')
+        }}</label>
         <select
           id="vertical-margin"
           v-model="fontVerticalMargin"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleVerticalMargin(fontVerticalMargin)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ translate('Select') }}</option>
           <option
             v-for="verticalMargin in tailwindPaddingPlusMargin.verticalMargin"
             :key="verticalMargin"
@@ -82,14 +87,16 @@ watch(
       </div>
       <hr />
       <div class="pbx-my-2 pbx-py-2">
-        <label for="horizontal-margin" class="pbx-myPrimaryInputLabel"> Horizontal Margin </label>
+        <label for="horizontal-margin" class="pbx-myPrimaryInputLabel">{{
+          translate('Horizontal Margin')
+        }}</label>
         <select
           id="horizontal-margin"
           v-model="fontHorizontalMargin"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleHorizontalMargin(fontHorizontalMargin)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ translate('Select') }}</option>
           <option
             v-for="horizontalMargin in tailwindPaddingPlusMargin.horizontalMargin"
             :key="horizontalMargin"

package/src/Components/PageBuilder/EditorMenu/Editables/OpacityEditor.vue

@@ -2,11 +2,14 @@
 import EditorAccordion from '../EditorAccordion.vue'
 import ManageBackgroundOpacity from './ManageBackgroundOpacity.vue'
 import ManageOpacity from './ManageOpacity.vue'
+import { useTranslations } from '../../../../composables/useTranslations'
+
+const { translate } = useTranslations()
 </script>
 
 <template>
   <EditorAccordion>
-    <template #title>Opacity & Transparency </template>
+    <template #title>{{ translate('Opacity & Transparency') }}</template>
     <template #content>
       <ManageOpacity></ManageOpacity>
       <hr />