@myissue/vue-website-page-builder 3.3.36 → 3.3.37

package/package.json

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

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

@@ -53,7 +53,7 @@ const getSvgPreview = (title: string) => {
         <div
           v-for="helper in componentHelpers"
           :key="helper.title"
-          class="pbx-border pbx-border-solid pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer pbx-p-4"
+          class="pbx-border-solid pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer pbx-p-4"
           @click="handleDropComponent(helper)"
         >
           <div class="pbx-max-h-72 pbx-cursor-pointer pbx-object-contain pbx-bg-white pbx-mx-auto">
@@ -74,7 +74,7 @@ const getSvgPreview = (title: string) => {
         <div
           v-for="comp in components[0].components.data"
           :key="comp.title"
-          class="pbx-border pbx-border-solid pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer"
+          class="pbx-border-solid pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer"
           @click="handleDropComponent(convertToComponentObject(comp))"
         >
           <div

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

@@ -74,7 +74,7 @@ watch(
               </div>
               <div v-if="color !== 'none'" class="pbx-flex pbx-items-center">
                 <div
-                  class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border pbx-border-gray-100 pbx-rounded-sm"
+                  class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border-solid pbx-border-gray-100 pbx-rounded-sm"
                   :class="`pbx-bg-${color.replace('pbx-bg-', '')}`"
                 ></div>
                 <span class="pbx-ml-3">{{ color }}</span>

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

@@ -101,7 +101,7 @@ watch(
               </div>
               <div
                 v-if="borderColor !== 'none'"
-                class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border pbx-border-gray-100 pbx-rounded-sm"
+                class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border-solid pbx-border-gray-100 pbx-rounded-sm"
                 :class="`bg-${borderColor?.replace('border-', '')}`"
               ></div>
               <span class="pbx-block pbx-truncate">{{ borderColor }}</span>

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

@@ -59,7 +59,7 @@ const handleAddClasses = async function () {
       <div class="pbx-flex pbx-gap-2 pbx-item-center pbx-flex-col">
         <div class="pbx-flex pbx-gap-2 pbx-item-center">
           <div
-            class="pbx-mt-1 pbx-relative pbx-flex pbx-items-center pbx-w-full pbx-border pbx-myPrimaryInput pbx-py-0 pbx-p-0"
+            class="pbx-mt-1 pbx-relative pbx-flex pbx-items-center pbx-w-full pbx-border-solid pbx-myPrimaryInput pbx-py-0 pbx-p-0"
           >
             <input
               v-model="inputClass"

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

@@ -219,7 +219,7 @@ const handleToggleOpenHyperlinkInNewTab = async function () {
         <!-- no attached url - end -->
         <div v-if="hyperlinkEnable === true" class="pbx-my-2 pbx-py-2">
           <div
-            class="pbx-relative pbx-flex pbx-items-center pbx-w-full pbx-border pbx-myPrimaryInput pbx-py-0 pbx-p-0"
+            class="pbx-relative pbx-flex pbx-items-center pbx-w-full pbx-border-solid pbx-border-gray-200 pbx-myPrimaryInput pbx-py-0 pbx-p-0"
           >
             <input
               v-model="urlInput"

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

@@ -73,7 +73,7 @@ watch(
               </div>
               <div v-if="color !== 'none'" class="pbx-flex pbx-items-center">
                 <div
-                  class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border pbx-border-gray-100 pbx-rounded-sm"
+                  class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border-solid pbx-border-gray-100 pbx-rounded-sm"
                   :class="`pbx-bg-${color.replace('pbx-text-', '')}`"
                 ></div>
                 <span class="pbx-ml-3">{{ color }}</span>

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

@@ -1,10 +1,7 @@
 <template>
-  <div
-    class="pbx-flex pbx-flex-col pbx-border pbx-border-solid pbx-border-gray-400"
-    :class="{ '': expanded }"
-  >
+  <div class="pbx-flex pbx-flex-col pbx-border-solid pbx-border-gray-400" :class="{ '': expanded }">
     <div
-      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-solid pbx-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"
       @click="expanded = !expanded"
     >
       <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-my-0 pbx-py-0">

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

@@ -65,7 +65,7 @@ function onScroll() {
 </script>
 
 <template>
-  <div class="pbx-flex pbx-max-h-[50rem] pbx-flex-col">
+  <div class="pbx-flex pbx-h-full 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"
     >

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

@@ -117,7 +117,7 @@ function prettifyHtml(html) {
               </div>
               <div
                 v-if="getElement"
-                class="pbx-overflow-hidden pbx-border pbx-border-gray-100 pbx-mb-6"
+                class="pbx-overflow-hidden pbx-border-solid pbx-border-gray-100 pbx-mb-6"
               >
                 <div class="pbx-bg-stone-800 pbx-pt-4 pbx-1 pbx-border-b-solid pbx-border-gray-200">
                   <div class="pbx-overflow-x-auto">
@@ -202,7 +202,7 @@ function prettifyHtml(html) {
               </div>
               <div
                 v-if="getComponent"
-                class="pbx-overflow-hidden pbx-border pbx-border-gray-100 pbx-mb-6"
+                class="pbx-overflow-hidden pbx-border-solid pbx-border-gray-100 pbx-mb-6"
               >
                 <div class="pbx-bg-stone-800 pbx-pt-4 pbx-1 pbx-border-b-solid pbx-border-gray-200">
                   <div class="pbx-overflow-x-auto">
@@ -287,7 +287,7 @@ function prettifyHtml(html) {
                 <div
                   v-for="component in getComponents"
                   :key="component.id"
-                  class="pbx-overflow-hidden pbx-border pbx-border-gray-100 pbx-mb-6"
+                  class="pbx-overflow-hidden pbx-border-solid pbx-border-gray-100 pbx-mb-6"
                 >
                   <!-- Id and Title above the table, styled to look connected -->
                   <div

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

@@ -156,7 +156,7 @@ const openHTMLSettings = function () {
             <span> 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 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"
+            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-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"
           >
             <!-- Main Settings Start -->
             <button

package/src/Components/TipTap/TipTapInput.vue

@@ -224,7 +224,7 @@ onMounted(() => {
             <div>
               <div>
                 <div
-                  class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max pbx-p-1 pbx-rounded-full pbx-border pbx-border-solid pbx-border-gray-200 pbx-shadow-sm"
+                  class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max pbx-p-1 pbx-rounded-full pbx-border-solid pbx-border-gray-200 pbx-shadow-sm"
                 >
                   <button
                     @click="pageBuilderService.toggleTipTapModal(false)"
@@ -238,7 +238,7 @@ onMounted(() => {
               </div>
             </div>
             <div
-              class="pbx-flex pbx-items-center pbx-p-1 pbx-rounded-full pbx-border pbx-border-solid pbx-border-gray-200 pbx-shadow-sm"
+              class="pbx-flex pbx-items-center pbx-p-1 pbx-rounded-full pbx-border-solid pbx-border-gray-200 pbx-shadow-sm"
             >
               <div class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
                 <button

package/src/DemoComponents/DemoUnsplash.vue

@@ -169,7 +169,7 @@ onMounted(async () => {
       <div class="pbx-mt-2">
         <div
           v-if="getUnsplashImages && getUnsplashImages.results"
-          class="pbx-flex lg:pbx-justify-between pbx-justify-end pbx-items-center pbx-gap-2 pbx-py-2 pbx-px-2 pbx-mb-1 pbx-rounded-full pbx-border pbx-border-solid pbx-border-gray-200 pbx-shadow-sm"
+          class="pbx-flex lg:pbx-justify-between pbx-justify-end pbx-items-center pbx-gap-2 pbx-py-2 pbx-px-2 pbx-mb-1 pbx-rounded-full pbx-border-solid pbx-border-gray-200 pbx-shadow-sm"
         >
           <div class="lg:pbx-flex pbx-hidden pbx-justify-left pbx-items-center pbx-gap-2">
             <button
@@ -292,7 +292,7 @@ onMounted(async () => {
                   v-for="image in getUnsplashImages.results"
                   :key="image.id"
                   @click="handleImageClick({ url: image.urls.regular, user: image.user.name })"
-                  class="pbx-border pbx-border-solid pbx-border-gray-200 pbx-my-2 pbx-px-2 pbx-p-2 pbx-cursor-pointer"
+                  class="pbx-border-solid pbx-border-gray-200 pbx-my-2 pbx-px-2 pbx-p-2 pbx-cursor-pointer"
                 >
                   <img
                     :alt="image.user.name"

package/src/PageBuilder/PageBuilder.vue

@@ -363,7 +363,7 @@ onMounted(async () => {
 
 <template>
   <div
-    class="pbx-font-sans pbx-max-w-full pbx-m-1 pbx-border pbx-border-solid pbx-border-gray-400 pbx-inset-x-0 pbx-z-10 pbx-bg-white pbx-overflow-x-auto pbx-h-full"
+    class="pbx-font-sans pbx-max-w-full pbx-m-1 pbx-border-solid pbx-border-gray-400 pbx-inset-x-0 pbx-z-10 pbx-bg-white pbx-overflow-x-auto pbx-h-full"
   >
     <GlobalLoader v-if="getIsLoadingGlobal & !openAppNotStartedModal"></GlobalLoader>
     <ModalBuilder
@@ -436,7 +436,7 @@ onMounted(async () => {
       <!-- Top Layout Save And Reset Area - Start -->
       <div
         id="pagebuilder-toolbar-area"
-        class="pbx-flex pbx-items-center pbx-justify-between pbx-bg-myPrimaryLightGrayColor pbx-border-b pbx-border-solid pbx-border-gray-200 pbx-mb-2 lg:pbx-px-6 pbx-px-4 pbx-font-sans"
+        class="pbx-flex pbx-items-center pbx-justify-between pbx-bg-myPrimaryLightGrayColor pbx-border-b-solid pbx-border-gray-200 pbx-mb-2 lg:pbx-px-6 pbx-px-4 pbx-font-sans"
       >
         <template
           v-if="
@@ -691,7 +691,7 @@ onMounted(async () => {
 
         <main
           ref="pbxToolBar"
-          class="pbx-flex pbx-flex-col pbx-grow pbx-rounded-tr-2xl pbx-rounded-tl-2xl pbx-border pbx-border-solid pbx-border-gray-200 pbx-items-stretch pbx-h-[90vh]"
+          class="pbx-flex pbx-flex-col pbx-grow pbx-rounded-tr-2xl pbx-rounded-tl-2xl pbx-border-solid pbx-border-gray-200 pbx-items-stretch pbx-h-[90vh]"
           :class="{ 'pbx-mr-2': !getMenuRight, '': getMenuRight }"
         >
           <div