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

package/src/DemoComponents/HomeSection.vue

@@ -110,12 +110,12 @@ onMounted(async () => {
 
 <template>
   <div>
-    <div class="myPrimaryWidthScreenModule bg-red-50 lg:block">
-      <div class="myPrimaryContentSection">
-        <h2 class="mySecondaryHeader">
+    <div class="pbx-myPrimaryWidthScreenModule pbx-bg-red-50 lg:pbx-block">
+      <div class="pbx-myPrimaryContentSection">
+        <h2 class="pbx-mySecondaryHeader">
           Bring your vision to life and create impressive pages using a click & drop Page Builder
         </h2>
-        <p class="myPrimaryParagraph font-normal">
+        <p class="pbx-myPrimaryParagraph pbx-font-normal">
           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
@@ -123,13 +123,13 @@ onMounted(async () => {
 
           <br />
         </p>
-        <div class="mt-4">
-          <p class="myPrimaryParagraph font-normal">
+        <div class="pbx-mt-4">
+          <p class="pbx-myPrimaryParagraph pbx-font-normal">
             Download or install our powerful, flexible, and easy-to-use free Vue 3 Page Builder via
             <br />
             <strong> npm:</strong>
             <a
-              class="text-myPrimaryLinkColor"
+              class="pbx-text-myPrimaryLinkColor"
               href="https://www.npmjs.com/package/@myissue/vue-website-page-builder"
               target="_blank"
             >
@@ -138,32 +138,36 @@ onMounted(async () => {
           </p>
         </div>
       </div>
-      <div class="m-4">
+      <div class="pbx-m-4">
         <!--   :CustomBuilderComponents="DemoBuilderComponents" -->
         <PageBuilder :CustomMediaLibraryComponent="DemoMediaLibraryComponent"></PageBuilder>
       </div>
     </div>
 
-    <FullWidthElement :descriptionArea="true" class="bg-gray-50">
+    <FullWidthElement :descriptionArea="true" class="pbx-bg-gray-50">
       <template #title>Everything you need. Break free from design limitations </template>
       <template #description>
-        <p class="myPrimaryParagraph font-normal">
+        <p class="pbx-myPrimaryParagraph pbx-font-normal">
           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>
       </template>
       <template #content>
-        <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 mt-8">
+        <div
+          class="pbx-grid pbx-grid-cols-1 pbx-gap-8 sm:pbx-grid-cols-2 md:pbx-grid-cols-2 lg:pbx-grid-cols-4 pbx-mt-8"
+        >
           <div
             v-for="feature in features"
             :key="feature.name"
-            class="bg-red-200 bg-opacity-20 hover:bg-opacity-10 w-full lg:min-h-[20rem] min-h-[12rem] relative col-span-1 flex flex-col text-center rounded-lg shadow-sm outline outline-2 outline-offset-8 outline-yellow-400"
+            class="pbx-bg-red-200 pbx-bg-opacity-20 hover:pbx-bg-opacity-10 pbx-w-full lg:pbx-min-h-[20rem] pbx-min-h-[12rem] pbx-relative pbx-col-span-1 pbx-flex pbx-flex-col pbx-text-center pbx-rounded-lg pbx-shadow-sm pbx-outline pbx-outline-2 pbx-outline-offset-8 pbx-outline-yellow-400"
           >
-            <div class="bg-black/0 absolute top-0 left-0 w-full h-full rounded-lg"></div>
-            <div class="px-2 pt-8 absolute top-0 w-full">
-              <p class="myTertiaryHeader">{{ feature.name }}</p>
-              <p class="myPrimaryParagraph font-medium drop-shadow-sm">
+            <div
+              class="pbx-bg-black/0 pbx-absolute pbx-top-0 pbx-left-0 pbx-w-full pbx-h-full pbx-rounded-lg"
+            ></div>
+            <div class="pbx-px-2 pbx-pt-8 pbx-absolute pbx-top-0 pbx-w-full">
+              <p class="pbx-myTertiaryHeader">{{ feature.name }}</p>
+              <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-drop-shadow-sm">
                 {{ feature.description }}
               </p>
             </div>

package/src/DemoComponents/html.json

@@ -1,7 +1,7 @@
 {
   "components": [
     {
-      "html_code": "<section><div class=\"relative py-4\"><div class=\"mx-auto max-w-7xl lg:px-4 px-2\"><div class=\"break-words\"><h2><strong>Demo Content</strong></h2></div></div></div></section>",
+      "html_code": "<section><div class=\"relative py-4\"><div class=\"mx-auto max-w-7xl lg:px-4 px-2\"><div class=\"pbx-break-words pbx-text-5xl\"><h2><strong>Demo Content</strong></h2></div></div></div></section>",
       "title": "Header H2"
     },
     {
@@ -10,12 +10,12 @@
       "title": "Text"
     },
     {
-      "html_code": "<section>\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2 bg-black\"><div class=\"mx-auto max-w-7xl\"><div class=\"myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3\"> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition rounded-tl-full\" src=\"https://images.unsplash.com/photo-1632765866070-3fadf25d3d5b?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMjh8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDgzMXww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"b2fb2e61-c916-4195-9cd2-c1d25747b4f7\">  </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition rounded-full\" src=\"https://images.unsplash.com/photo-1542513217-0b0eedf7005d?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMDR8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDc5MXww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"fdf36a14-f7ef-4025-942f-c87b20b18005\">  </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition rounded-br-full\" src=\"https://images.unsplash.com/photo-1574015974293-817f0ebebb74?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwyNnx8bW9kZWx8ZW58MHx8fHwxNzQ5ODMwNzM1fDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"618a74a7-5d41-4dce-937c-130dd7490569\"></div></div> </div></div>\n</section>",
+      "html_code": "<section>\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2 bg-black\"><div class=\"mx-auto max-w-7xl m\"><div class=\"myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3\"> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition rounded-tl-full\" src=\"https://images.unsplash.com/photo-1632765866070-3fadf25d3d5b?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMjh8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDgzMXww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"b2fb2e61-c916-4195-9cd2-c1d25747b4f7\">  </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition rounded-full\" src=\"https://images.unsplash.com/photo-1542513217-0b0eedf7005d?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMDR8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDc5MXww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"fdf36a14-f7ef-4025-942f-c87b20b18005\">  </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition rounded-br-full\" src=\"https://images.unsplash.com/photo-1574015974293-817f0ebebb74?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwyNnx8bW9kZWx8ZW58MHx8fHwxNzQ5ODMwNzM1fDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"618a74a7-5d41-4dce-937c-130dd7490569\"></div></div> </div></div>\n</section>",
 
       "title": "3 Vertical Images"
     },
     {
-      "html_code": "<section><div class=\"relative py-4\"><div class=\"mx-auto max-w-7xl lg:px-4 px-2\"><div class=\"break-words\"><h3>The web builder for stunning pages</h3></div></div></div></section>",
+      "html_code": "<section><div class=\"relative py-4\"><div class=\"mx-auto max-w-7xl lg:px-4 px-2\"><div class=\"pbx-break-words pbx-text-3xl mt-6\"><h3>The web builder for stunning pages</h3></div></div></div></section>",
 
       "title": "Header H3"
     },
@@ -30,7 +30,7 @@
       "title": "2 Vertical Images"
     },
     {
-      "html_code": "<section><div class=\"relative py-4\" selected=\"\"><div class=\"mx-auto max-w-7xl lg:px-4 px-2\"><div class=\"break-words\"><h3>Just publish it with Vue</h3></div></div></div></section>",
+      "html_code": "<section><div class=\"relative py-4\" selected=\"\"><div class=\"mx-auto max-w-7xl lg:px-4 px-2\"><div class=\"pbx-break-words pbx-text-3xl mt-6\"><h3>Just publish it with Vue</h3></div></div></div></section>",
 
       "title": "Header H3"
     },

package/src/PageBuilder/PageBuilder.vue

@@ -254,12 +254,12 @@ onMounted(async () => {
 <template>
   <div
     id="builder-container"
-    class="font-sans max-w-full m-1 border border-gray-600 inset-x-0 z-10 bg-white overflow-x-scroll"
+    class="pbx-font-sans pbx-max-w-full pbx-m-1 pbx-border pbx-border-gray-400 pbx-inset-x-0 pbx-z-10 pbx-bg-white pbx-overflow-x-scroll"
   >
-    <div id="pagebuilder-top-area" class="lg:px-4 pt-2 pb-4 mx-4 mb-4 mt-2">
+    <div id="pagebuilder-top-area" class="lg:pbx-px-4 pbx-pt-2 pbx-pb-4 pbx-mx-4 pbx-mb-4 pbx-mt-2">
       <div
         @click.self="pageBuilderClass.clearHtmlSelection()"
-        class="flex justify-between items-center pb-2 border-b border-gray-200"
+        class="pbx-flex pbx-justify-between pbx-items-center pbx-pb-2 pbx-border-b pbx-border-gray-200"
       >
         <!-- Logo # start -->
         <div @click="pageBuilderClass.clearHtmlSelection()">
@@ -269,16 +269,16 @@ onMounted(async () => {
               getConfigPageBuilder.pageBuilderLogo &&
               getConfigPageBuilder.pageBuilderLogo.src
             "
-            class="flex items-center divide-x divide-gray-200"
+            class="pbx-flex pbx-items-center pbx-divide-x pbx-divide-gray-200"
           >
-            <div id="pagebuilder-logo-main" class="pr-4">
-              <img class="h-6" :src="getConfigPageBuilder.pageBuilderLogo.src" alt="Logo" />
+            <div id="pagebuilder-logo-main" class="pbx-pr-4">
+              <img class="pbx-h-6" :src="getConfigPageBuilder.pageBuilderLogo.src" alt="Logo" />
             </div>
-            <span class="myPrimaryParagraph font-medium pl-4">Editing Page </span>
+            <span class="pbx-myPrimaryParagraph pbx-font-medium pbx-pl-4">Editing Page </span>
           </div>
           <div v-else>
-            <div class="pr-6">
-              <span class="myPrimaryParagraph font-medium">Editing Page </span>
+            <div class="pbx-pr-6">
+              <span class="pbx-myPrimaryParagraph pbx-font-medium">Editing Page </span>
             </div>
           </div>
         </div>
@@ -329,14 +329,14 @@ onMounted(async () => {
     </DynamicModalBuilder>
 
     <div>
-      <div class="relative h-full flex pb-2 gap-2">
+      <div class="pbx-relative pbx-h-full pbx-flex pbx-pb-2 pbx-gap-2">
         <div
           @click.self="pageBuilderClass.clearHtmlSelection()"
           id="pagebuilder-left-area"
-          class="min-w-[3.5rem] pt-6 pb-2 ml-2 bg-myPrimaryLightGrayColor rounded-full shadow-sm"
+          class="pbx-min-w-[3.5rem] pbx-pt-6 pbx-pb-2 pbx-ml-2 pbx-bg-myPrimaryLightGrayColor pbx-rounded-full pbx-shadow-sm"
         >
-          <div class="mx-2 flex flex-col myPrimaryGap items-stretch">
-            <div class="flex gap-2 items-center justify-center">
+          <div class="pbx-mx-2 pbx-flex pbx-flex-col pbx-myPrimaryGap pbx-items-stretch">
+            <div class="pbx-flex pbx-gap-2 pbx-items-center pbx-justify-center">
               <button
                 type="button"
                 @click="
@@ -345,9 +345,9 @@ onMounted(async () => {
                     handleAddComponent()
                   }
                 "
-                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="myMediumIcon material-symbols-outlined"> interests </span>
+                <span class="pbx-myMediumIcon material-symbols-outlined"> interests </span>
               </button>
             </div>
             <div @click.self="pageBuilderClass.clearHtmlSelection()">
@@ -356,19 +356,19 @@ onMounted(async () => {
           </div>
         </div>
         <main
-          class="flex flex-col h-full grow rounded-tr-2xl rounded-tl-2xl border border-gray-200 items-stretch"
-          :class="{ 'mr-2': !getMenuRight, '': getMenuRight }"
+          class="pbx-flex pbx-flex-col pbx-h-full pbx-grow pbx-rounded-tr-2xl pbx-rounded-tl-2xl pbx-border pbx-border-gray-200 pbx-items-stretch"
+          :class="{ 'pbx-mr-2': !getMenuRight, '': getMenuRight }"
         >
           <div
             id="pagebuilder-toolbar-area"
-            class="flex items-center justify-between rounded-t-2xl bg-myPrimaryLightGrayColor min-w-[30rem]"
+            class="pbx-flex pbx-items-center pbx-justify-between pbx-rounded-t-2xl pbx-bg-myPrimaryLightGrayColor pbx-min-w-[30rem]"
           >
             <div
               @click.self="pageBuilderClass.clearHtmlSelection()"
-              class="flex myPrimaryGap items-center pt-4 pb-2 pl-2 h-24 w-full min-w-36"
+              class="pbx-flex pbx-myPrimaryGap pbx-items-center pbx-pt-4 pbx-pb-2 pbx-pl-2 pbx-h-24 pbx-w-full pbx-min-w-36"
             >
               <button
-                class="mySecondaryButton h-6 flex gap-2"
+                class="pbx-mySecondaryButton pbx-h-6 pbx-flex pbx-gap-2"
                 @click.stop="
                   async () => {
                     await pageBuilderClass.clearHtmlSelection()
@@ -380,19 +380,21 @@ onMounted(async () => {
               >
                 <div
                   v-if="!getIsSaving"
-                  class="h-10 w-4 cursor-pointer rounded-full flex items-center justify-center"
+                  class="pbx-h-10 pbx-w-4 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-justify-center"
                 >
                   <span class="material-symbols-outlined">save</span>
                 </div>
                 <div
                   v-if="getIsSaving"
-                  class="h-10 w-4 cursor-pointer rounded-full flex items-center justify-center"
+                  class="pbx-h-10 pbx-w-4 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-justify-center"
                 >
-                  <span class="relative flex size-3">
+                  <span class="pbx-relative pbx-flex pbx-size-3">
                     <span
-                      class="absolute inline-flex h-full w-full animate-ping rounded-full bg-gray-400 opacity-75"
+                      class="pbx-absolute pbx-inline-flex pbx-h-full pbx-w-full pbx-animate-ping pbx-rounded-full pbx-bg-gray-400 pbx-opacity-75"
+                    ></span>
+                    <span
+                      class="pbx-relative pbx-inline-flex pbx-size-3 pbx-rounded-full pbx-bg-green-200"
                     ></span>
-                    <span class="relative inline-flex size-3 rounded-full bg-green-200"></span>
                   </span>
                 </div>
                 <div>Save</div>
@@ -403,11 +405,11 @@ onMounted(async () => {
 
             <div
               @click.self="pageBuilderClass.clearHtmlSelection()"
-              class="flex justify-end py-2 pr-2 h-24 w-full"
+              class="pbx-flex pbx-justify-end pbx-py-2 pbx-pr-2 pbx-h-24 pbx-w-full"
             >
               <div
                 @click.self="pageBuilderClass.clearHtmlSelection()"
-                class="flex items-center justify-center gap-4"
+                class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-4"
               >
                 <button
                   type="button"
@@ -418,18 +420,18 @@ onMounted(async () => {
                     }
                   "
                 >
-                  <div class="flex items-center justify-center gap-2">
-                    <span class="lg:block hidden">
-                      <div class="whitespace-nowrap">Add new Components</div>
+                  <div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2">
+                    <span class="lg:pbx-block pbx-hidden">
+                      <div class="pbx-whitespace-nowrap">Add new Components</div>
                     </span>
                     <span
-                      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="myMediumIcon material-symbols-outlined"> interests </span>
+                      <span class="pbx-myMediumIcon material-symbols-outlined"> interests </span>
                     </span>
                   </div>
                 </button>
-                <div class="flex items-center justify-center gap-4">
+                <div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-4">
                   <button
                     type="button"
                     @click="
@@ -441,13 +443,13 @@ onMounted(async () => {
                       }
                     "
                   >
-                    <div class="flex items-center justify-center gap-2">
-                      <div class="whitespace-nowrap lg:block hidden">Preview</div>
+                    <div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2">
+                      <div class="pbx-whitespace-nowrap lg:pbx-block pbx-hidden">Preview</div>
 
                       <span
-                        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="myMediumIcon material-symbols-outlined"> visibility </span>
+                        <span class="pbx-myMediumIcon material-symbols-outlined"> visibility </span>
                       </span>
                     </div>
                   </button>
@@ -457,24 +459,24 @@ onMounted(async () => {
 
             <div
               @click.self="pageBuilderClass.clearHtmlSelection()"
-              class="flex justify-end py-2 pr-2 w-full h-24"
+              class="pbx-flex pbx-justify-end pbx-py-2 pbx-pr-2 pbx-w-full pbx-h-24"
             >
               <div
                 @click.self="pageBuilderClass.clearHtmlSelection()"
-                class="flex items-center justify-center gap-4"
+                class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-4"
               >
                 <button
                   type="button"
                   v-if="getMenuRight === false"
                   @click="pageBuilderStateStore.setMenuRight(true)"
                 >
-                  <div class="flex items-center justify-center gap-2">
-                    <span class="lg:block hidden"> Styling </span>
+                  <div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2">
+                    <span class="lg:pbx-block pbx-hidden"> Styling </span>
 
                     <span
-                      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="myMediumIcon material-symbols-outlined"> more_vert </span>
+                      <span class="pbx-myMediumIcon material-symbols-outlined"> more_vert </span>
                     </span>
                   </div>
                 </button>
@@ -483,7 +485,10 @@ onMounted(async () => {
           </div>
 
           <EditGetElement></EditGetElement>
-          <div id="contains-pagebuilder" class="pl-4 pr-4 pb-4 overflow-y-auto pt-1 h-[39rem]">
+          <div
+            id="contains-pagebuilder"
+            class="pbx-pl-4 pbx-pr-4 pbx-pb-4 pbx-overflow-y-auto pbx-pt-1 pbx-h-[39rem]"
+          >
             <div id="pagebuilder">
               <div ref="draggableZone">
                 <!-- Added Components to DOM # start -->
@@ -491,9 +496,9 @@ onMounted(async () => {
                   v-for="component in getComponents"
                   :key="component.id"
                   id="page-builder-editor-editable-area"
-                  class="bg-white grow"
+                  class="pbx-bg-white pbx-grow"
                 >
-                  <div @mouseup="handleSelectComponent(component)" class="relative group">
+                  <div @mouseup="handleSelectComponent(component)" class="pbx-relative group">
                     <div v-html="component.html_code"></div>
                   </div>
                 </div>
@@ -505,16 +510,16 @@ onMounted(async () => {
               <div
                 @click="pageBuilderClass.clearHtmlSelection()"
                 id="pagebuilder-bottom-components-area"
-                class="pt-8 pb-12 text-center focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 my-2 mx-4"
-                :class="{ 'border-t border-gray-200': getComponents.length > 0 }"
+                class="pbx-pt-8 pbx-pb-12 pbx-text-center focus:pbx-outline-none focus:pbx-ring-2 focus:pbx-ring-indigo-500 focus:pbx-ring-offset-2 pbx-my-2 pbx-mx-4"
+                :class="{ 'pbx-border-t pbx-border-gray-200': getComponents.length > 0 }"
               >
-                <div class="flex items-center justify-center gap-2 font-medium">
-                  <span class="lg:block hidden">
+                <div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2 pbx-font-medium">
+                  <span class="lg:pbx-block pbx-hidden">
                     <div>Add new components to the bottom of the page</div>
                   </span>
                 </div>
 
-                <div class="mt-6 flex items-center gap-2 justify-center">
+                <div class="pbx-mt-6 pbx-flex pbx-items-center pbx-gap-2 pbx-justify-center">
                   <button
                     @click="
                       () => {
@@ -523,10 +528,10 @@ onMounted(async () => {
                       }
                     "
                     type="button"
-                    class="myPrimaryButton flex items-center gap-2 justify-center"
+                    class="pbx-myPrimaryButton pbx-flex pbx-items-center pbx-gap-2 pbx-justify-center"
                   >
-                    <span class="myMediumIcon material-symbols-outlined"> interests </span>
-                    <span class="font-medium"> Add new Components </span>
+                    <span class="pbx-myMediumIcon material-symbols-outlined"> interests </span>
+                    <span class="pbx-font-medium"> Add new Components </span>
                   </button>
                 </div>
               </div>
@@ -540,10 +545,10 @@ onMounted(async () => {
           aria-label="Menu"
           id="pagebuilder-right-area"
           :class="{
-            'w-0': !getMenuRight,
-            'w-80 mr-2 bg-myPrimaryLightGrayColor items-stretch': getMenuRight,
+            'pbx-w-0': !getMenuRight,
+            'pbx-w-80 pbx-mr-2 pbx-bg-myPrimaryLightGrayColor pbx-items-stretch': getMenuRight,
           }"
-          class="duration-300 z-20 flex-shrink-0 overflow-hidden shadow-sm rounded-l-2xl"
+          class="pbx-duration-300 pbx-z-20 pbx-flex-shrink-0 pbx-overflow-hidden pbx-shadow-sm pbx-rounded-l-2xl"
         >
           <RightSidebarEditor @closeEditor="pageBuilderStateStore.setMenuRight(false)">
           </RightSidebarEditor>

package/src/PageBuilder/Preview.vue

@@ -1,28 +1,10 @@
 <script setup>
-import { ref, computed } from 'vue'
-import { sharedPageBuilderStore } from '../stores/shared-store'
-
-const pageBuilderStateStore = sharedPageBuilderStore
-
-const getConfigPageBuilder = computed(() => {
-  return pageBuilderStateStore.getConfigPageBuilder
-})
-
-const emit = defineEmits(['firstPageBuilderPreviewModalButton'])
-
-// first button function
-const firstButton = async function () {
-  emit('firstPageBuilderPreviewModalButton')
-}
+import { ref } from 'vue'
 
 const htmlPage = ref('')
 
 const previewData = localStorage.getItem('preview')
 
-// htmlPage.value = JSON.parse(htmlPage.value);
-// // join
-// htmlPage.value = htmlPage.value.join("");
-
 if (previewData) {
   try {
     const parsedData = JSON.parse(previewData)
@@ -38,7 +20,9 @@ if (previewData) {
 
 <template>
   <div>
-    <div class="w-full inset-x-0 h-[90vh] bg-white overflow-x-scroll lg:pt-2 pt-2">
+    <div
+      class="pbx-w-full pbx-inset-x-0 pbx-h-[90vh] pbx-bg-white pbx-overflow-x-scroll lg:pbx-pt-2 pbx-pt-2"
+    >
       <div id="page-builder-editor">
         <div class="" v-html="htmlPage"></div>
       </div>