@myissue/vue-website-page-builder 3.3.64 → 3.3.67

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

@@ -99,14 +99,19 @@ watch(
 
 <template>
   <EditorAccordion>
-    <template #title> Typographies </template>
+    <template #title>{{ $t('typography.title') }}</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">
+        {{ $t('typography.appearance') }}
+      </p>
       <template v-if="false">
         <div class="pbx-my-2 pbx-py-2">
-          <label class="pbx-myPrimaryInputLabel"> Font Size </label>
+          <label for="font-base" class="pbx-myPrimaryInputLabel">{{
+            $t('typography.fontSize')
+          }}</label>
           <select
+            id="font-base"
             v-model="fontBase"
             class="pbx-myPrimarySelect"
             @change="pageBuilderService.handleFontSizeBase(fontBase)"
@@ -119,8 +124,11 @@ watch(
         </div>
       </template>
       <div class="pbx-my-2 pbx-py-2">
-        <label class="pbx-myPrimaryInputLabel"> Font size </label>
+        <label for="font-desktop" class="pbx-myPrimaryInputLabel">{{
+          $t('typography.fontSize')
+        }}</label>
         <select
+          id="font-desktop"
           v-model="fontDesktop"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleFontSizeDesktop(fontDesktop)"
@@ -133,8 +141,11 @@ watch(
       </div>
       <template v-if="false">
         <div class="pbx-my-2 pbx-py-2">
-          <label class="pbx-myPrimaryInputLabel"> Font tablet size </label>
+          <label for="font-tablet" class="pbx-myPrimaryInputLabel">{{
+            $t('typography.fontTabletSize')
+          }}</label>
           <select
+            id="font-tablet"
             v-model="fontTablet"
             class="pbx-myPrimarySelect"
             @change="pageBuilderService.handleFontSizeTablet(fontTablet)"
@@ -146,8 +157,11 @@ watch(
           </select>
         </div>
         <div class="pbx-my-2 pbx-py-2">
-          <label class="pbx-myPrimaryInputLabel"> Font small screens </label>
+          <label for="font-mobile" class="pbx-myPrimaryInputLabel">{{
+            $t('typography.fontMobileSize')
+          }}</label>
           <select
+            id="font-mobile"
             v-model="fontMobile"
             class="pbx-myPrimarySelect"
             @change="pageBuilderService.handleFontSizeMobile(fontMobile)"
@@ -162,8 +176,11 @@ watch(
       <hr />
 
       <div class="pbx-my-2 pbx-py-2">
-        <label class="pbx-myPrimaryInputLabel"> Font weight </label>
+        <label for="font-weight" class="pbx-myPrimaryInputLabel">{{
+          $t('typography.fontWeight')
+        }}</label>
         <select
+          id="font-weight"
           v-model="fontWeight"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleFontWeight(fontWeight)"
@@ -178,8 +195,11 @@ watch(
 
       <!-- FONT FAMILY -->
       <div class="pbx-my-2 pbx-py-2">
-        <label class="pbx-myPrimaryInputLabel"> Font family </label>
+        <label for="font-family" class="pbx-myPrimaryInputLabel">{{
+          $t('typography.fontFamily')
+        }}</label>
         <select
+          id="font-family"
           v-model="fontFamily"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleFontFamily(fontFamily)"
@@ -193,8 +213,11 @@ watch(
       <hr />
 
       <div class="pbx-my-2 pbx-py-2">
-        <label class="pbx-myPrimaryInputLabel"> Font Style </label>
+        <label for="font-style" class="pbx-myPrimaryInputLabel">{{
+          $t('typography.fontStyle')
+        }}</label>
         <select
+          id="font-style"
           v-model="fontStyle"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleFontStyle(fontStyle)"

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

@@ -2,6 +2,7 @@
 import { computed, ref, watch, nextTick } from 'vue'
 import { sharedPageBuilderStore } from '../../../stores/shared-store'
 import ClassEditor from './Editables/ClassEditor.vue'
+import StyleEditor from './Editables/StyleEditor.vue'
 import ImageEditor from './Editables/ImageEditor.vue'
 import OpacityEditor from './Editables/OpacityEditor.vue'
 import Typography from './Editables/Typography.vue'
@@ -22,12 +23,11 @@ import ModalBuilder from '../../../Components/Modals/ModalBuilder.vue'
 import { extractCleanHTMLFromPageBuilder } from '../../../composables/extractCleanHTMLFromPageBuilder'
 
 const pageBuilderService = getPageBuilder()
-// Use shared store instance
 const pageBuilderStateStore = sharedPageBuilderStore
 
-// emit
-const emit = defineEmits(['closeEditor'])
+defineEmits(['closeEditor'])
 
+const isLoadingPageStyles = ref(null)
 const getComponents = computed(() => {
   return pageBuilderStateStore.getComponents
 })
@@ -35,7 +35,6 @@ const getElement = computed(() => {
   return pageBuilderStateStore.getElement
 })
 
-// Get tagName of element
 const elementTag = computed(() => {
   return getElement.value?.tagName
 })
@@ -106,15 +105,8 @@ const handleUpdatePageStyles = async function () {
   await pageBuilderService.globalPageStyles()
 }
 
-const clearClassesFromPage = async function () {
-  await pageBuilderService.clearClassesFromPage()
-}
-
-const clearInlineStylesFromPagee = async function () {
-  await pageBuilderService.clearInlineStylesFromPagee()
-}
-
 const handleCloseGlobalPageStyles = async function () {
+  isLoadingPageStyles.value = true
   await pageBuilderService.handleManualSave()
 
   // Remove global highlight if present
@@ -124,6 +116,7 @@ const handleCloseGlobalPageStyles = async function () {
   }
 
   showModalGlobalPageStyles.value = false
+  isLoadingPageStyles.value = false
 }
 </script>
 
@@ -140,13 +133,13 @@ const handleCloseGlobalPageStyles = async function () {
         <span class="material-symbols-outlined"> close </span>
       </button>
       <p class="pbx-font-medium pbx-text-sm">
-        Editing
+        {{ $t('rightSidebar.editing') }}
         <span class="pbx-lowercase">&lt;{{ elementTag }}&gt;</span>
       </p>
     </div>
 
     <div
-      v
+      v-if="!showModalGlobalPageStyles"
       ref="scrollContainer"
       @scroll="onScroll"
       class="pbx-pl-3 pbx-pr-3 pbx-mb-4 pbx-overflow-y-scroll"
@@ -180,21 +173,23 @@ const handleCloseGlobalPageStyles = async function () {
         <article class="pbx-my-1 pbx-bg-white">
           <ClassEditor></ClassEditor>
         </article>
+        <article class="pbx-my-1 pbx-bg-white">
+          <StyleEditor></StyleEditor>
+        </article>
       </div>
 
       <!-- Global Page Styles -->
       <article class="pbx-my-1 pbx-bg-white">
         <EditorAccordion>
-          <template #title>Global Page Styles</template>
+          <template #title>{{ $t('rightSidebar.globalPageStylesTitle') }}</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.
+              {{ $t('rightSidebar.globalPageStylesDescription') }}
             </label>
 
             <div class="pbx-mt-4">
               <button @click="handleUpdatePageStyles" type="button" class="pbx-myPrimaryButton">
-                Update Page Styles
+                {{ $t('rightSidebar.updatePageStyles') }}
               </button>
             </div>
           </template>
@@ -208,15 +203,14 @@ const handleCloseGlobalPageStyles = async function () {
         class="pbx-my-1 pbx-bg-white"
       >
         <EditorAccordion>
-          <template #title>Download HTML</template>
+          <template #title>{{ $t('rightSidebar.downloadHtmlTitle') }}</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.
+              {{ $t('rightSidebar.downloadHtmlDescription') }}
             </label>
             <div class="pbx-mt-4">
               <button @click="handleDownloadHTML" type="button" class="pbx-myPrimaryButton">
-                Download HTML file
+                {{ $t('rightSidebar.downloadHtmlButton') }}
               </button>
             </div>
           </template>
@@ -227,63 +221,58 @@ const handleCloseGlobalPageStyles = async function () {
 
     <ModalBuilder
       maxWidth="md"
-      minHeight="pbx-h-[90vh]"
+      minHeight="pbx-min-h-[65vh] pbx-max-h-[65vh]"
       :showModalBuilder="showModalGlobalPageStyles"
-      title="Global Page Styles"
+      :title="$t('rightSidebar.globalPageStylesTitle')"
       @closeMainModalBuilder="handleCloseGlobalPageStyles"
     >
-      <div class="pbx-min-h-[90vh] pbx-flex pbx-flex-col pbx-gap-2 pbx-pt-4 pbx-pb-2">
-        <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.
-        </p>
-        <article class="pbx-my-1 pbx-bg-gray-100">
-          <Typography></Typography>
-        </article>
-        <article class="pbx-my-1 pbx-bg-gray-100">
-          <TextColorEditor :globalPageLayout="true"></TextColorEditor>
-        </article>
-        <article class="pbx-my-1 pbx-bg-gray-100">
-          <BackgroundColorEditor :globalPageLayout="true"></BackgroundColorEditor>
-        </article>
-        <article class="pbx-my-1 pbx-bg-gray-100">
-          <Padding> </Padding>
-        </article>
-        <article class="pbx-my-1 pbx-bg-gray-100">
-          <Margin> </Margin>
-        </article>
-        <article class="pbx-my-1 pbx-bg-gray-100">
-          <BorderRadius></BorderRadius>
-        </article>
-        <article class="pbx-my-1 pbx-bg-gray-100">
-          <Borders></Borders>
-        </article>
-        <article class="pbx-my-1 pbx-bg-gray-100">
-          <ClassEditor></ClassEditor>
-        </article>
-      </div>
-      <label class="pbx-myPrimaryInputLabel pbx-my-4">
-        Choose an action to clean up your page:
-      </label>
-      <div
-        class="pbx-border-0 pbx-border-solid pbx-border-t pbx-border-gray-200 pbx-mt-4 pbx-flex pbx-items-center pbx-justify-end"
-      >
-        <div class="pbx-py-4 pbx-flex sm:pbx-justify-end pbx-justify-center">
-          <div
-            class="sm:pbx-grid-cols-1 sm:pbx-items-end sm:pbx-justify-end pbx-flex sm:pbx-flex-row pbx-flex-col pbx-myPrimaryGap sm:pbx-w-5/6 pbx-w-full pbx-mt-4"
-          >
-            <!-- Button: Clear all CSS classes -->
-            <button @click="clearClassesFromPage" class="pbx-myPrimaryButton" type="button">
-              Clear All CSS Classes
-            </button>
-
-            <!-- Button: Clear all inline styles -->
-            <button @click="clearInlineStylesFromPagee" class="pbx-myPrimaryButton" type="button">
-              Clear All Inline Styles
-            </button>
+      <div class="pbx-flex pbx-flex-col pbx-gap-2 pbx-pt-4 pbx-pb-2">
+        <div v-if="isLoadingPageStyles">
+          <div class="pbx-flex pbx-items-center pbx-my-2 pbx-py-4 pbx-px-2 pbx-justify-center">
+            <div
+              class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
+            >
+              <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
+              >
+            </div>
+          </div>
+        </div>
+        <div v-if="!isLoadingPageStyles && showModalGlobalPageStyles" class="pbx-pb-12">
+          <div>
+            <p class="pbx-myPrimaryParagraph">
+              {{ $t('rightSidebar.globalPageStylesDescription') }}
+            </p>
+            <article class="pbx-my-1 pbx-bg-gray-100">
+              <Typography></Typography>
+            </article>
+            <article class="pbx-my-1 pbx-bg-gray-100">
+              <TextColorEditor :globalPageLayout="true"></TextColorEditor>
+            </article>
+            <article class="pbx-my-1 pbx-bg-gray-100">
+              <BackgroundColorEditor :globalPageLayout="true"></BackgroundColorEditor>
+            </article>
+            <article class="pbx-my-1 pbx-bg-gray-100">
+              <Padding> </Padding>
+            </article>
+            <article class="pbx-my-1 pbx-bg-gray-100">
+              <Margin> </Margin>
+            </article>
+            <article class="pbx-my-1 pbx-bg-gray-100">
+              <BorderRadius></BorderRadius>
+            </article>
+            <article class="pbx-my-1 pbx-bg-gray-100">
+              <Borders></Borders>
+            </article>
+            <article class="pbx-my-1 pbx-bg-gray-100">
+              <ClassEditor></ClassEditor>
+            </article>
+            <article class="pbx-my-1 pbx-bg-gray-100">
+              <StyleEditor></StyleEditor>
+            </article>
           </div>
         </div>
-        <!--v-if-->
       </div>
     </ModalBuilder>
   </div>

package/src/Components/PageBuilder/Settings/PageBuilderSettings.vue

@@ -299,7 +299,7 @@ const getPageBuilderConfig = computed(() => {
                         class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500"
                       >
                         <div class="pbx-min-w-[30rem] pbx-w-max">
-                          {{ getPageBuilderConfig.userSettings.language }}
+                          {{ getPageBuilderConfig.userSettings.language?.default }}
                         </div>
                       </td>
                     </tr>
@@ -317,8 +317,8 @@ const getPageBuilderConfig = computed(() => {
                             class="pbx-inline-flex pbx-items-center pbx-px-2.5 pbx-py-0.5 pbx-rounded-full pbx-text-xs pbx-font-medium"
                             :class="
                               getPageBuilderConfig.userSettings.autoSave
-                                ? 'bg-green-100 text-green-800'
-                                : 'bg-red-100 text-red-800'
+                                ? 'pbx-bg-green-100 pbx-text-green-800'
+                                : 'pbx-bg-red-100 pbx-text-red-800'
                             "
                           >
                             {{

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

@@ -35,7 +35,7 @@ const firstModalButtonFunctionDynamicModalBuilder = ref(null)
 const secondModalButtonFunctionDynamicModalBuilder = ref(null)
 const thirdModalButtonFunctionDynamicModalBuilder = ref(null)
 
-const deleteAllComponentsFromDOM = function () {
+const handleDeleteComponentsFromDOM = function () {
   showModalDeleteAllComponents.value = true
   typeModal.value = 'delete'
   gridColumnModal.value = 2
@@ -53,11 +53,10 @@ const deleteAllComponentsFromDOM = function () {
   // handle click
   thirdModalButtonFunctionDynamicModalBuilder.value = async function () {
     isDeletingLayout.value = true
-    pageBuilderService.deleteAllComponentsFromDOM()
     await pageBuilderService.clearHtmlSelection()
-    await pageBuilderService.removeCurrentComponentsFromLocalStorage()
-
+    await pageBuilderService.handleFormSubmission()
     await delay(500)
+
     showModalDeleteAllComponents.value = false
     isDeletingLayout.value = false
   }
@@ -113,7 +112,9 @@ const openHTMLSettings = function () {
               getPageBuilderConfig.userForPageBuilder.name[0]
             }}
           </div>
-          <div class="pbx-hidden pbx-text-xs pbx-h-8 lg:pbx-flex pbx-items-center pbx-font-normal">
+          <div
+            class="pbx-hidden pbx-text-xs pbx-h-8 lg:pbx-flex pbx-items-center pbx-font-normal w-max break-keep"
+          >
             {{ getPageBuilderConfig.userForPageBuilder.name }}
           </div>
         </div>
@@ -141,7 +142,9 @@ const openHTMLSettings = function () {
               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">
+          <div
+            class="pbx-hidden pbx-text-xs pbx-h-8 lg:pbx-flex pbx-items-center pbx-font-normal w-max break-keep"
+          >
             {{ getPageBuilderConfig.userForPageBuilder.name }}
           </div>
         </div>
@@ -153,7 +156,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> {{ $t('options.button') }} </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"
@@ -169,7 +172,7 @@ const openHTMLSettings = function () {
               class="pbx-mySecondaryButton pbx-text-xs pbx-font-normal"
               type="button"
             >
-              Config Overview
+              <span> {{ $t('options.configOverview') }} </span>
             </button>
             <!-- Main Settings End -->
 
@@ -179,17 +182,17 @@ const openHTMLSettings = function () {
               class="pbx-mySecondaryButton pbx-text-xs pbx-font-normal"
               type="button"
             >
-              HTML Overview
+              <span> {{ $t('options.htmlOverview') }} </span>
             </button>
             <!-- HTML Settings End -->
 
             <!-- Delete Layout Start -->
             <button
-              @click="deleteAllComponentsFromDOM"
+              @click="handleDeleteComponentsFromDOM"
               class="pbx-myPrimaryDeleteButton pbx-text-xs pbx-font-normal"
               type="button"
             >
-              Delete Layout
+              <span> {{ $t('options.deleteLayout') }} </span>
             </button>
             <!-- Delete Layout End -->
           </div>