@myissue/vue-website-page-builder 3.2.86 → 3.2.91

package/src/Components/PageBuilder/EditorMenu/Editables/{PaddingPlusMargin.vue → Padding.vue}

@@ -61,14 +61,13 @@ watch(
 </script>
 <template>
   <EditorAccordion>
-    <template #title>Padding & Margin</template>
+    <template #title>Padding</template>
     <template #content>
-      <p class="myPrimaryParagraph font-medium py-0 my-4">Padding</p>
-      <div class="my-2 py-2">
-        <label class="myPrimaryInputLabel"> Padding Y-axis </label>
+      <div class="pbx-my-2 pbx-py-2">
+        <label class="pbx-myPrimaryInputLabel"> Vertical Padding </label>
         <select
           v-model="fontVerticalPadding"
-          class="myPrimarySelect"
+          class="pbx-myPrimarySelect"
           @change="pageBuilderClass.handleVerticalPadding(fontVerticalPadding)"
         >
           <option disabled value="">Select</option>
@@ -80,11 +79,12 @@ watch(
           </option>
         </select>
       </div>
-      <div class="my-2 py-2">
-        <label class="myPrimaryInputLabel"> Padding X-axis </label>
+      <hr />
+      <div class="pbx-my-2 pbx-py-2">
+        <label class="pbx-myPrimaryInputLabel"> Horizontal Padding </label>
         <select
           v-model="fontHorizontalPadding"
-          class="myPrimarySelect"
+          class="pbx-myPrimarySelect"
           @change="pageBuilderClass.handleHorizontalPadding(fontHorizontalPadding)"
         >
           <option disabled value="">Select</option>
@@ -96,39 +96,6 @@ watch(
           </option>
         </select>
       </div>
-      <p class="myPrimaryParagraph font-medium py-0 my-4">Margin</p>
-      <div class="my-2 py-2">
-        <label class="myPrimaryInputLabel"> Margin Y-axis </label>
-        <select
-          v-model="fontVerticalMargin"
-          class="myPrimarySelect"
-          @change="pageBuilderClass.handleVerticalMargin(fontVerticalMargin)"
-        >
-          <option disabled value="">Select</option>
-          <option
-            v-for="verticalMargin in tailwindPaddingPlusMargin.verticalMargin"
-            :key="verticalMargin"
-          >
-            {{ verticalMargin }}
-          </option>
-        </select>
-      </div>
-      <div class="my-2 py-2">
-        <label class="myPrimaryInputLabel"> Margin X-axis </label>
-        <select
-          v-model="fontHorizontalMargin"
-          class="myPrimarySelect"
-          @change="pageBuilderClass.handleHorizontalMargin(fontHorizontalMargin)"
-        >
-          <option disabled value="">Select</option>
-          <option
-            v-for="horizontalMargin in tailwindPaddingPlusMargin.horizontalMargin"
-            :key="horizontalMargin"
-          >
-            {{ horizontalMargin }}
-          </option>
-        </select>
-      </div>
     </template>
   </EditorAccordion>
 </template>

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

@@ -25,28 +25,28 @@ watch(
 
 <template>
   <Listbox as="div" v-model="textColor">
-    <div class="relative">
-      <ListboxButton class="w-max flex items-center myPrimaryTag">
-        <div v-if="getTextColor === 'none'" class="flex gap-2 items-center">
+    <div class="pbx-relative">
+      <ListboxButton class="pbx-w-max pbx-flex pbx-items-center pbx-myPrimaryTag">
+        <div v-if="getTextColor === 'none'" class="pbx-flex pbx-gap-2 pbx-items-center">
           <span class="material-symbols-outlined"> format_color_text </span>
-          <span class="block truncate text-[12.5px]">Text color</span>
+          <span class="pbx-block pbx-truncate pbx-text-[12.5px]">Text color</span>
         </div>
-        <div v-if="textColor !== 'none'" class="flex items-center gap-2">
+        <div v-if="textColor !== 'none'" class="pbx-flex pbx-items-center pbx-gap-2">
           <div
-            class="aspect-square w-6 h-6 border border-gray-800 rounded-sm"
-            :class="`bg-${textColor?.replace('text-', '')}`"
+            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>
-          <span class="block truncate text-[12.5px]">{{ textColor }}</span>
+          <span class="pbx-block pbx-truncate pbx-text-[12.5px]">{{ textColor }}</span>
         </div>
       </ListboxButton>
 
       <transition
-        leave-active-class="transition ease-in duration-100"
-        leave-from-class="opacity-100"
-        leave-to-class="opacity-0"
+        leave-active-class="pbx-transition pbx-ease-in pbx-duration-100"
+        leave-from-class="pbx-opacity-100"
+        leave-to-class="pbx-opacity-0"
       >
         <ListboxOptions
-          class="absolute min-w-[12rem] z-40 mt-1 max-h-56 w-full overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+          class="pbx-absolute pbx-min-w-[12rem] pbx-z-40 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-gray-50 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"
         >
           <ListboxOption
             as="template"
@@ -58,20 +58,22 @@ watch(
           >
             <li
               :class="[
-                active ? 'bg-myPrimaryLinkColor text-white' : 'text-myPrimaryDarkGrayColor',
-                'relative cursor-default select-none py-2 pl-3 pr-9',
+                active
+                  ? 'pbx-bg-myPrimaryLinkColor pbx-text-white'
+                  : 'pbx-text-myPrimaryDarkGrayColor',
+                'pbx-relative pbx-cursor-default pbx-select-none pbx-py-2 pbx-pl-3 pbx-pr-9',
               ]"
             >
-              <div v-if="color === 'none'" class="flex items-center">
+              <div v-if="color === 'none'" class="pbx-flex pbx-items-center">
                 <span class="material-symbols-outlined"> invert_colors </span>
-                <span class="ml-3">Default black</span>
+                <span class="pbx-ml-3">Default black</span>
               </div>
-              <div v-if="color !== 'none'" class="flex items-center">
+              <div v-if="color !== 'none'" class="pbx-flex pbx-items-center">
                 <div
-                  class="aspect-square w-6 h-6 border border-gray-100 rounded-sm"
-                  :class="`bg-${color.replace('text-', '')}`"
+                  class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border pbx-border-gray-100 pbx-rounded-sm"
+                  :class="`pbx-bg-${color.replace('pbx-text-', '')}`"
                 ></div>
-                <span class="ml-3">{{ color }}</span>
+                <span class="pbx-ml-3">{{ color }}</span>
               </div>
             </li>
           </ListboxOption>

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

@@ -102,13 +102,13 @@ watch(
     <template #title> Typographies </template>
     <template #content>
       <!-- FONT SIZES -->
-      <p class="myPrimaryParagraph font-medium py-0 my-4">Font sizes</p>
-      <div class="my-2 py-2">
-        <label class="myPrimaryInputLabel"> Font Base </label>
+      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">Font Appearance</p>
+      <div class="pbx-my-2 pbx-py-2">
+        <label class="pbx-myPrimaryInputLabel"> Font Size </label>
         <select
           v-model="fontBase"
-          class="myPrimarySelect"
-          @change="pageBuilderClass.handleFontSize(fontBase)"
+          class="pbx-myPrimarySelect"
+          @change="pageBuilderClass.handleFontSizeBase(fontBase)"
         >
           <option disabled value="">Select</option>
           <option v-for="fontSize in tailwindFontSizes.fontBase" :key="fontSize">
@@ -116,52 +116,69 @@ watch(
           </option>
         </select>
       </div>
-      <div class="my-2 py-2">
-        <label class="myPrimaryInputLabel"> Font desktop size </label>
-        <select
-          v-model="fontDesktop"
-          class="myPrimarySelect"
-          @change="pageBuilderClass.handleFontSize(fontDesktop)"
-        >
-          <option disabled value="">Select</option>
-          <option v-for="fontSize in tailwindFontSizes.fontDesktop" :key="fontSize">
-            {{ fontSize }}
-          </option>
-        </select>
-      </div>
-      <div class="my-2 py-2">
-        <label class="myPrimaryInputLabel"> Font tablet size </label>
-        <select
-          v-model="fontTablet"
-          class="myPrimarySelect"
-          @change="pageBuilderClass.handleFontSize(fontTablet)"
-        >
-          <option disabled value="">Select</option>
-          <option v-for="fontSize in tailwindFontSizes.fontTablet" :key="fontSize">
-            {{ fontSize }}
-          </option>
-        </select>
-      </div>
-      <div class="my-2 py-2">
-        <label class="myPrimaryInputLabel"> Font mobile size </label>
+      <template v-if="false">
+        <div class="pbx-my-2 pbx-py-2">
+          <label class="pbx-myPrimaryInputLabel"> Font desktop size </label>
+          <select
+            v-model="fontDesktop"
+            class="pbx-myPrimarySelect"
+            @change="pageBuilderClass.handleFontSizeDesktop(fontDesktop)"
+          >
+            <option disabled value="">Select</option>
+            <option v-for="fontSize in tailwindFontSizes.fontDesktop" :key="fontSize">
+              {{ fontSize }}
+            </option>
+          </select>
+        </div>
+        <div class="pbx-my-2 pbx-py-2">
+          <label class="pbx-myPrimaryInputLabel"> Font tablet size </label>
+          <select
+            v-model="fontTablet"
+            class="pbx-myPrimarySelect"
+            @change="pageBuilderClass.handleFontSizeTablet(fontTablet)"
+          >
+            <option disabled value="">Select</option>
+            <option v-for="fontSize in tailwindFontSizes.fontTablet" :key="fontSize">
+              {{ fontSize }}
+            </option>
+          </select>
+        </div>
+        <div class="pbx-my-2 pbx-py-2">
+          <label class="pbx-myPrimaryInputLabel"> Font small screens </label>
+          <select
+            v-model="fontMobile"
+            class="pbx-myPrimarySelect"
+            @change="pageBuilderClass.handleFontSizeMobile(fontMobile)"
+          >
+            <option disabled value="">Select</option>
+            <option v-for="fontSize in tailwindFontSizes.fontMobile" :key="fontSize">
+              {{ fontSize }}
+            </option>
+          </select>
+        </div>
+      </template>
+      <hr />
+      <!-- FONT FAMILY -->
+      <div class="pbx-my-2 pbx-py-2">
+        <label class="pbx-myPrimaryInputLabel"> Font family </label>
         <select
-          v-model="fontMobile"
-          class="myPrimarySelect"
-          @change="pageBuilderClass.handleFontSize(fontMobile)"
+          v-model="fontFamily"
+          class="pbx-myPrimarySelect"
+          @change="pageBuilderClass.handleFontFamily(fontFamily)"
         >
           <option disabled value="">Select</option>
-          <option v-for="fontSize in tailwindFontSizes.fontMobile" :key="fontSize">
-            {{ fontSize }}
+          <option v-for="fontFamily in tailwindFontStyles.fontFamily" :key="fontFamily">
+            {{ fontFamily }}
           </option>
         </select>
       </div>
       <hr />
-      <p class="myPrimaryParagraph font-medium py-0 my-4">Font general</p>
-      <div class="my-2 py-2">
-        <label class="myPrimaryInputLabel"> Font weight </label>
+
+      <div class="pbx-my-2 pbx-py-2">
+        <label class="pbx-myPrimaryInputLabel"> Font weight </label>
         <select
           v-model="fontWeight"
-          class="myPrimarySelect"
+          class="pbx-myPrimarySelect"
           @change="pageBuilderClass.handleFontWeight(fontWeight)"
         >
           <option disabled value="">Select</option>
@@ -170,24 +187,12 @@ watch(
           </option>
         </select>
       </div>
-      <div class="my-2 py-2">
-        <label class="myPrimaryInputLabel"> Font family </label>
-        <select
-          v-model="fontFamily"
-          class="myPrimarySelect"
-          @change="pageBuilderClass.handleFontFamily(fontFamily)"
-        >
-          <option disabled value="">Select</option>
-          <option v-for="fontFamily in tailwindFontStyles.fontFamily" :key="fontFamily">
-            {{ fontFamily }}
-          </option>
-        </select>
-      </div>
-      <div class="my-2 py-2">
-        <label class="myPrimaryInputLabel"> Font Style </label>
+      <hr />
+      <div class="pbx-my-2 pbx-py-2">
+        <label class="pbx-myPrimaryInputLabel"> Font Style </label>
         <select
           v-model="fontStyle"
-          class="myPrimarySelect"
+          class="pbx-myPrimarySelect"
           @change="pageBuilderClass.handleFontStyle(fontStyle)"
         >
           <option disabled value="">Select</option>

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

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-col border border-gray-400" :class="{ 'pb-8': expanded }">
+  <div class="pbx-flex pbx-flex-col pbx-border pbx-border-gray-400" :class="{ '': expanded }">
     <div
-      class="flex flex-row justify-between items-center pl-3 pr-3 py-5 cursor-pointer duration-200 hover:bg-myPrimaryLightGrayColor border-b border-gray-200"
+      class="pbx-flex pbx-flex-row pbx-justify-between pbx-items-center pbx-pl-3 pbx-pr-3 pbx-py-5 pbx-cursor-pointer pbx-duration-200 hover:pbx-bg-myPrimaryLightGrayColor pbx-border-b pbx-border-gray-200"
       @click="expanded = !expanded"
     >
-      <p class="myPrimaryParagraph font-medium my-0 py-0">
+      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-my-0 pbx-py-0">
         <slot name="title" />
       </p>
 
@@ -15,7 +15,10 @@
         <span class="material-symbols-outlined"> chevron_right </span>
       </template>
     </div>
-    <div :class="[expanded ? 'block' : 'hidden']" class="px-4 ease-linear duration-75">
+    <div
+      :class="[expanded ? 'pbx-block' : 'pbx-hidden']"
+      class="pbx-px-4 pbx-ease-linear pbx-duration-75"
+    >
       <slot name="content" />
     </div>
   </div>

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

@@ -7,8 +7,8 @@ import ClassEditor from './Editables/ClassEditor.vue'
 import ImageEditor from './Editables/ImageEditor.vue'
 import OpacityEditor from './Editables/OpacityEditor.vue'
 import Typography from './Editables/Typography.vue'
-import PaddingPlusMargin from './Editables/PaddingPlusMargin.vue'
-import DeleteElement from './Editables/DeleteElement.vue'
+import Padding from './Editables/Padding.vue'
+import Margin from './Editables/Margin.vue'
 import BorderRadius from './Editables/BorderRadius.vue'
 import BackgroundColorEditor from './Editables/BackgroundColorEditor.vue'
 import Borders from './Editables/Borders.vue'
@@ -45,56 +45,61 @@ const isHeadingElement = computed(() => {
 </script>
 
 <template>
-  <div class="flex max-h-[50rem] flex-col">
-    <div class="flex flex-row justify-between pt-7 pr-4 pl-4 items-center mb-3">
+  <div class="pbx-flex pbx-max-h-[50rem] pbx-flex-col">
+    <div
+      class="pbx-flex pbx-flex-row pbx-justify-between pbx-pt-7 pbx-pr-4 pbx-pl-4 pbx-items-center pbx-mb-3"
+    >
       <button
         type="button"
         @click="$emit('closeEditor')"
-        class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible: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"
       >
         <span class="material-symbols-outlined"> close </span>
       </button>
-      <p class="font-medium text-sm">
+      <p class="pbx-font-medium pbx-text-sm">
         Editing
-        <span class="lowercase">&lt;{{ elementTag }}&gt;</span>
+        <span class="pbx-lowercase">&lt;{{ elementTag }}&gt;</span>
       </p>
     </div>
 
-    <div class="pl-3 pr-3 mb-4 overflow-y-scroll">
+    <div class="pbx-pl-3 pbx-pr-3 pbx-mb-4 pbx-overflow-y-scroll">
       <div v-show="getElement && pageBuilderClass.isEditableElement(getElement)">
-        <article class="mb-1">
+        <article class="pbx-mb-1">
           <ImageEditor> </ImageEditor>
         </article>
-        <article class="mb-1">
+        <article class="pbx-mb-1">
           <TipTap></TipTap>
         </article>
-        <article v-if="false" class="my-1 bg-white">
+        <article class="pbx-my-1 pbx-bg-white">
           <Typography></Typography>
         </article>
 
-        <article class="my-1 bg-white">
+        <article class="pbx-my-1 pbx-bg-white">
           <OpacityEditor> </OpacityEditor>
         </article>
-        <article class="my-1 bg-white">
-          <PaddingPlusMargin> </PaddingPlusMargin>
+        <article class="pbx-my-1 pbx-bg-white">
+          <Padding> </Padding>
         </article>
-        <article class="my-1 bg-white">
+        <article class="pbx-my-1 pbx-bg-white">
+          <Margin> </Margin>
+        </article>
+        <article class="pbx-my-1 pbx-bg-white">
           <BorderRadius></BorderRadius>
         </article>
-        <article class="my-1 bg-white">
+        <article class="pbx-my-1 pbx-bg-white">
           <Borders></Borders>
         </article>
-        <article class="my-1 bg-white">
+        <article class="pbx-my-1 pbx-bg-white">
           <ClassEditor></ClassEditor>
         </article>
       </div>
 
       <div>
-        <article class="my-1 bg-white">
+        <article class="pbx-my-1 pbx-bg-white">
           <ElementEditor></ElementEditor>
         </article>
       </div>
-      <article class="mt-1 bg-white"></article>
+      <article class="pbx-mt-1 pbx-bg-white"></article>
     </div>
   </div>
 </template>