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

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

@@ -4,6 +4,10 @@ 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 +65,19 @@ watch(
 </script>
 <template>
   <EditorAccordion>
-    <template #title>Padding</template>
+    <template #title>{{ translate('Padding') }}</template>
     <template #content>
       <div class="pbx-my-2 pbx-py-2">
-        <label for="vertical-padding" class="pbx-myPrimaryInputLabel"> Vertical Padding </label>
+        <label for="vertical-padding" class="pbx-myPrimaryInputLabel">{{
+          translate('Vertical Padding')
+        }}</label>
         <select
           id="vertical-padding"
           v-model="fontVerticalPadding"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleVerticalPadding(fontVerticalPadding)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ translate('Select') }}</option>
           <option
             v-for="verticalPadding in tailwindPaddingPlusMargin.verticalPadding"
             :key="verticalPadding"
@@ -82,14 +88,16 @@ watch(
       </div>
       <hr />
       <div class="pbx-my-2 pbx-py-2">
-        <label for="horizontal-padding" class="pbx-myPrimaryInputLabel"> Horizontal Padding </label>
+        <label for="horizontal-padding" class="pbx-myPrimaryInputLabel">{{
+          translate('Horizontal Padding')
+        }}</label>
         <select
           id="horizontal-padding"
           v-model="fontHorizontalPadding"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleHorizontalPadding(fontHorizontalPadding)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ translate('Select') }}</option>
           <option
             v-for="horizontalPadding in tailwindPaddingPlusMargin.horizontalPadding"
             :key="horizontalPadding"

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

@@ -3,7 +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()
 
 const pageBuilderStateStore = sharedPageBuilderStore
@@ -56,11 +58,14 @@ const handleAddStyle = async () => {
 
 <template>
   <EditorAccordion>
-    <template #title>Inline Styles</template>
+    <template #title>{{ translate('Inline Styles') }}</template>
     <template #content>
       <label class="pbx-myPrimaryInputLabel pbx-my-4">
-        These are the inline styles applied by the builder. Add your own styles and press Enter to
-        apply them to the selected element.
+        {{
+          translate(
+            'These are the inline styles applied by the builder. Add your own styles and press Enter to apply them to the selected element.',
+          )
+        }}
       </label>
 
       <div class="pbx-flex pbx-flex-row pbx-flex-wrap pbx-gap-2 pbx-mt-2 pbx-mb-4">
@@ -83,14 +88,14 @@ const handleAddStyle = async () => {
 
       <div>
         <label for="custom-style-property" class="pbx-myPrimaryInputLabel">
-          Add your own style.
+          {{ translate('Add your own style.') }}
         </label>
         <div class="pbx-flex pbx-gap-2 pbx-flex-col pbx-item-center">
           <input
             id="custom-style-property"
             v-model="inputProperty"
             type="text"
-            placeholder="property"
+            :placeholder="translate('property')"
             @keydown.enter.prevent="handleEnterOnProperty"
             autocomplete="off"
             class="pbx-myPrimaryInput"
@@ -100,13 +105,15 @@ const handleAddStyle = async () => {
             ref="valueInputRef"
             v-model="inputValue"
             type="text"
-            placeholder="value"
+            :placeholder="translate('value')"
             @keydown.enter="handleAddStyle"
             autocomplete="off"
             class="pbx-myPrimaryInput"
           />
 
-          <button @click="handleAddStyle" type="button" class="pbx-myPrimaryButton">Add</button>
+          <button @click="handleAddStyle" 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/TextColorEditor.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,9 @@ watch(
               class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border pbx-border-gray-800 pbx-rounded-sm"
               :class="`pbx-bg-${textColor?.replace('pbx-text-', '')}`"
             ></div>
-            <div>Text Color</div>
+            <div>
+              <div>{{ translate('Text Color') }}</div>
+            </div>
           </div>
 
           <span v-if="globalPageLayout" class="material-symbols-outlined"> chevron_right </span>

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

@@ -5,6 +5,10 @@ import tailwindFontSizes from '../../../../utils/builder/tailwind-font-sizes'
 import tailwindFontStyles from '../../../../utils/builder/tailwind-font-styles'
 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
@@ -99,20 +103,24 @@ watch(
 
 <template>
   <EditorAccordion>
-    <template #title> Typographies </template>
+    <template #title>{{ translate('Typographies') }}</template>
     <template #content>
       <!-- FONT SIZES -->
-      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">Font Appearance</p>
+      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">
+        {{ translate('Font Appearance') }}
+      </p>
       <template v-if="false">
         <div class="pbx-my-2 pbx-py-2">
-          <label for="font-base" class="pbx-myPrimaryInputLabel"> Font Size </label>
+          <label for="font-base" class="pbx-myPrimaryInputLabel">
+            {{ translate('Font Size') }}
+          </label>
           <select
             id="font-base"
             v-model="fontBase"
             class="pbx-myPrimarySelect"
             @change="pageBuilderService.handleFontSizeBase(fontBase)"
           >
-            <option disabled value="">Select</option>
+            <option disabled value="">{{ translate('Select') }}</option>
             <option v-for="fontSize in tailwindFontSizes.fontBase" :key="fontSize">
               {{ fontSize }}
             </option>
@@ -120,14 +128,16 @@ watch(
         </div>
       </template>
       <div class="pbx-my-2 pbx-py-2">
-        <label for="font-desktop" class="pbx-myPrimaryInputLabel"> Font size </label>
+        <label for="font-desktop" class="pbx-myPrimaryInputLabel">
+          {{ translate('Font size') }}
+        </label>
         <select
           id="font-desktop"
           v-model="fontDesktop"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleFontSizeDesktop(fontDesktop)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ translate('Select') }}</option>
           <option v-for="fontSize in tailwindFontSizes.fontDesktop" :key="fontSize">
             {{ fontSize }}
           </option>
@@ -135,28 +145,32 @@ watch(
       </div>
       <template v-if="false">
         <div class="pbx-my-2 pbx-py-2">
-          <label for="font-tablet" class="pbx-myPrimaryInputLabel"> Font tablet size </label>
+          <label for="font-tablet" class="pbx-myPrimaryInputLabel">
+            {{ translate('Font tablet size') }}
+          </label>
           <select
             id="font-tablet"
             v-model="fontTablet"
             class="pbx-myPrimarySelect"
             @change="pageBuilderService.handleFontSizeTablet(fontTablet)"
           >
-            <option disabled value="">Select</option>
+            <option disabled value="">{{ translate('Select') }}</option>
             <option v-for="fontSize in tailwindFontSizes.fontTablet" :key="fontSize">
               {{ fontSize }}
             </option>
           </select>
         </div>
         <div class="pbx-my-2 pbx-py-2">
-          <label for="font-mobile" class="pbx-myPrimaryInputLabel"> Font small screens </label>
+          <label for="font-mobile" class="pbx-myPrimaryInputLabel">
+            {{ translate('Font small screens') }}
+          </label>
           <select
             id="font-mobile"
             v-model="fontMobile"
             class="pbx-myPrimarySelect"
             @change="pageBuilderService.handleFontSizeMobile(fontMobile)"
           >
-            <option disabled value="">Select</option>
+            <option disabled value="">{{ translate('Select') }}</option>
             <option v-for="fontSize in tailwindFontSizes.fontMobile" :key="fontSize">
               {{ fontSize }}
             </option>
@@ -166,14 +180,16 @@ watch(
       <hr />
 
       <div class="pbx-my-2 pbx-py-2">
-        <label for="font-weight" class="pbx-myPrimaryInputLabel"> Font weight </label>
+        <label for="font-weight" class="pbx-myPrimaryInputLabel">
+          {{ translate('Font weight') }}
+        </label>
         <select
           id="font-weight"
           v-model="fontWeight"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleFontWeight(fontWeight)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ translate('Select') }}</option>
           <option v-for="fontWeight in tailwindFontStyles.fontWeight" :key="fontWeight">
             {{ fontWeight }}
           </option>
@@ -183,14 +199,16 @@ watch(
 
       <!-- FONT FAMILY -->
       <div class="pbx-my-2 pbx-py-2">
-        <label for="font-family" class="pbx-myPrimaryInputLabel"> Font family </label>
+        <label for="font-family" class="pbx-myPrimaryInputLabel">
+          {{ translate('Font family') }}
+        </label>
         <select
           id="font-family"
           v-model="fontFamily"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleFontFamily(fontFamily)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ translate('Select') }}</option>
           <option v-for="fontFamily in tailwindFontStyles.fontFamily" :key="fontFamily">
             {{ fontFamily }}
           </option>
@@ -199,14 +217,16 @@ watch(
       <hr />
 
       <div class="pbx-my-2 pbx-py-2">
-        <label for="font-style" class="pbx-myPrimaryInputLabel"> Font Style </label>
+        <label for="font-style" class="pbx-myPrimaryInputLabel">
+          {{ translate('Font Style') }}
+        </label>
         <select
           id="font-style"
           v-model="fontStyle"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleFontStyle(fontStyle)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ translate('Select') }}</option>
           <option v-for="fontStyle in tailwindFontStyles.fontStyle" :key="fontStyle">
             {{ fontStyle }}
           </option>

package/src/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue

@@ -21,6 +21,9 @@ import EditorAccordion from '../EditorMenu/EditorAccordion.vue'
 import fullHTMLContent from '../../../utils/builder/html-doc-declaration-with-components'
 import ModalBuilder from '../../../Components/Modals/ModalBuilder.vue'
 import { extractCleanHTMLFromPageBuilder } from '../../../composables/extractCleanHTMLFromPageBuilder'
+import { useTranslations } from '../../../composables/useTranslations'
+
+const { translate } = useTranslations()
 
 const pageBuilderService = getPageBuilder()
 const pageBuilderStateStore = sharedPageBuilderStore
@@ -128,12 +131,12 @@ const handleCloseGlobalPageStyles = async function () {
       <button
         type="button"
         @click="$emit('closeEditor')"
-        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"> close </span>
       </button>
       <p class="pbx-font-medium pbx-text-sm">
-        Editing
+        {{ translate('Editing') }}
         <span class="pbx-lowercase">&lt;{{ elementTag }}&gt;</span>
       </p>
     </div>
@@ -181,16 +184,19 @@ const handleCloseGlobalPageStyles = async function () {
       <!-- Global Page Styles -->
       <article class="pbx-my-1 pbx-bg-white">
         <EditorAccordion>
-          <template #title>Global Page Styles</template>
+          <template #title>{{ translate('Global Page Styles') }}</template>
           <template #content>
             <label class="pbx-myPrimaryInputLabel pbx-my-4">
-              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.
+              {{
+                translate(
+                  '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.',
+                )
+              }}
             </label>
 
             <div class="pbx-mt-4">
               <button @click="handleUpdatePageStyles" type="button" class="pbx-myPrimaryButton">
-                Update Page Styles
+                {{ translate('Update Page Styles') }}
               </button>
             </div>
           </template>
@@ -204,15 +210,18 @@ const handleCloseGlobalPageStyles = async function () {
         class="pbx-my-1 pbx-bg-white"
       >
         <EditorAccordion>
-          <template #title>Download HTML</template>
+          <template #title>{{ translate('Download HTML') }}</template>
           <template #content>
             <label class="pbx-myPrimaryInputLabel pbx-my-4">
-              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.
+              {{
+                translate(
+                  '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.',
+                )
+              }}
             </label>
             <div class="pbx-mt-4">
               <button @click="handleDownloadHTML" type="button" class="pbx-myPrimaryButton">
-                Download HTML file
+                {{ translate('Download HTML file') }}
               </button>
             </div>
           </template>
@@ -225,7 +234,7 @@ const handleCloseGlobalPageStyles = async function () {
       maxWidth="md"
       minHeight="pbx-min-h-[65vh] pbx-max-h-[65vh]"
       :showModalBuilder="showModalGlobalPageStyles"
-      title="Global Page Styles"
+      :title="translate('Global Page Styles')"
       @closeMainModalBuilder="handleCloseGlobalPageStyles"
     >
       <div class="pbx-flex pbx-flex-col pbx-gap-2 pbx-pt-4 pbx-pb-2">
@@ -236,7 +245,7 @@ const handleCloseGlobalPageStyles = async function () {
             >
               <span
                 class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"
-                >Loading...</span
+                >{{ translate('Loading...') }}</span
               >
             </div>
           </div>
@@ -244,8 +253,11 @@ const handleCloseGlobalPageStyles = async function () {
         <div v-if="!isLoadingPageStyles && showModalGlobalPageStyles" class="pbx-pb-12">
           <div>
             <p class="pbx-myPrimaryParagraph">
-              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.
+              {{
+                translate(
+                  '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.',
+                )
+              }}
             </p>
             <article class="pbx-my-1 pbx-bg-gray-100">
               <Typography></Typography>

package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue

@@ -4,12 +4,15 @@ import { sharedPageBuilderStore } from '../../../stores/shared-store'
 import ModalBuilder from '../../Modals/ModalBuilder.vue'
 import PageBuilderSettings from '../Settings/PageBuilderSettings.vue'
 import AdvancedPageBuilderSettings from '../Settings/AdvancedPageBuilderSettings.vue'
-import { preloadImage } from '../../../composables/preloadImage'
 
 import DynamicModalBuilder from '../../Modals/DynamicModalBuilder.vue'
 
 import { getPageBuilder } from '../../../composables/builderInstance'
 import { delay } from '../../../composables/delay'
+import { useTranslations } from '../../../composables/useTranslations'
+
+const { translate } = useTranslations()
+
 const pageBuilderService = getPageBuilder()
 
 // Use shared store instance
@@ -39,8 +42,8 @@ const handleDeleteComponentsFromDOM = function () {
   showModalDeleteAllComponents.value = true
   typeModal.value = 'delete'
   gridColumnModal.value = 2
-  titleModal.value = 'Remove all Components'
-  descriptionModal.value = 'Are you sure you want to remove all Components?'
+  titleModal.value = translate('Remove all Components')
+  descriptionModal.value = translate('Are you sure you want to remove all Components?')
   firstButtonModal.value = 'Close'
   secondButtonModal.value = null
   thirdButtonModal.value = 'Delete'
@@ -113,7 +116,7 @@ const openHTMLSettings = function () {
             }}
           </div>
           <div
-            class="pbx-hidden pbx-text-xs pbx-h-8 lg:pbx-flex pbx-items-center pbx-font-normal w-max break-keep"
+            class="pbx-hidden pbx-text-xs pbx-h-8 lg:pbx-flex pbx-items-center pbx-font-normal pbx-w-max pbx-break-keep"
           >
             {{ getPageBuilderConfig.userForPageBuilder.name }}
           </div>
@@ -137,13 +140,13 @@ const openHTMLSettings = function () {
             class="pbx-text-white pbx-flex-shrink-0 pbx-h-8 pbx-w-8 pbx-rounded-full pbx-flex pbx-justify-center pbx-items-center pbx-text-xs pbx-rounded-l-full"
           >
             <img
-              alt="avatar"
+              alt="{{ translate('avatar') }}"
               :src="`${getPageBuilderConfig.userForPageBuilder.image}`"
               class="pbx-block pbx-inset-0 pbx-object-top pbx-h-8 pbx-min-h-8 pbx-max-h-8 pbx-w-8 pbx-min-w-8 pbx-max-w-8 pbx-object-cover pbx-rounded-full"
             />
           </div>
           <div
-            class="pbx-hidden pbx-text-xs pbx-h-8 lg:pbx-flex pbx-items-center pbx-font-normal w-max break-keep"
+            class="pbx-hidden pbx-text-xs pbx-h-8 lg:pbx-flex pbx-items-center pbx-font-normal pbx-w-max pbx-break-keep"
           >
             {{ getPageBuilderConfig.userForPageBuilder.name }}
           </div>
@@ -156,7 +159,7 @@ const openHTMLSettings = function () {
         <!-- Component Start -->
         <div class="pbx-relative pbx-group">
           <button type="button" class="pbx-mySecondaryButton pbx-font-normal pbx-text-xs">
-            <span> Options </span>
+            <span> {{ translate('Options') }} </span>
           </button>
           <div
             class="pbx-absolute pbx-left-0 -pbx-ml-16 -pbx-mt-2 pbx-flex pbx-flex-col pbx-gap-3 pbx-shadow-lg pbx-bg-white pbx-w-max pbx-border-solid pbx-border pbx-border-gray-100 pbx-rounded-2xl pbx-transition-all pbx-duration-200 pbx-ease-out pbx-pt-4 pbx-pr-4 pbx-pb-4 pbx-pl-2 pbx-z-30 pbx-opacity-0 pbx-pointer-events-none pbx-translate-y-2 group-hover:pbx-opacity-100 group-hover:pbx-pointer-events-auto group-hover:pbx-translate-y-0"
@@ -172,7 +175,7 @@ const openHTMLSettings = function () {
               class="pbx-mySecondaryButton pbx-text-xs pbx-font-normal"
               type="button"
             >
-              Config Overview
+              {{ translate('Config Overview') }}
             </button>
             <!-- Main Settings End -->
 
@@ -182,7 +185,7 @@ const openHTMLSettings = function () {
               class="pbx-mySecondaryButton pbx-text-xs pbx-font-normal"
               type="button"
             >
-              HTML Overview
+              {{ translate('HTML Overview') }}
             </button>
             <!-- HTML Settings End -->
 
@@ -192,7 +195,7 @@ const openHTMLSettings = function () {
               class="pbx-myPrimaryDeleteButton pbx-text-xs pbx-font-normal"
               type="button"
             >
-              Delete Layout
+              {{ translate('Delete Layout') }}
             </button>
             <!-- Delete Layout End -->
           </div>

package/src/Components/TipTap/TipTapInput.vue

@@ -231,7 +231,7 @@ onMounted(() => {
                     type="button"
                     class="pbx-myPrimaryTag"
                   >
-                    <span class="material-symbols-outlined"> Save </span>
+                    <span class="material-symbols-outlined"> save </span>
                     <span>Save</span>
                   </button>
                 </div>