@myissue/vue-website-page-builder 3.4.2 → 3.4.5

package/package.json

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

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

@@ -46,7 +46,7 @@ watch(
       >
         <ListboxButton
           v-if="globalPageLayout"
-          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-bg-white hover:pbx-text-black pbx-text-black pbx-font-sans pbx-font-medium"
+          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-bg-white hover:pbx-text-black pbx-text-black pbx-font-sans pbx-font-medium pbx-border-0"
         >
           <div class="pbx-flex pbx-justify-start pbx-items-center pbx-gap-2">
             <div

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

@@ -121,11 +121,6 @@ watch(
                 ></div>
                 <span class="pbx-block pbx-truncate">{{ borderColor }}</span>
               </span>
-              <span
-                class="pbx-pointer-events-none pbx-absolute pbx-inset-y-0 pbx-right-0 pbx-ml-3 pbx-flex pbx-items-center pbx-pr-2"
-              >
-                <span class="material-symbols-outlined"> keyboard_arrow_down </span>
-              </span>
             </ListboxButton>
 
             <transition

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

@@ -85,7 +85,7 @@ const handleDelete = function () {
       class="pbx-h-10 pbx-w-10 pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square pbx-text-black"
       :class="[
         canMoveUp
-          ? 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0'
+          ? 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0 pbx-cursor-pointer'
           : 'pbx-cursor-not-allowed pbx-bg-opacity-20 hover:pbx-bg-gray-200',
       ]"
     >
@@ -98,7 +98,7 @@ const handleDelete = function () {
       class="pbx-h-10 pbx-w-10 pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square pbx-text-black"
       :class="[
         canMoveDown
-          ? 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0'
+          ? 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0 pbx-cursor-pointer'
           : 'pbx-cursor-not-allowed pbx-bg-opacity-20 hover:pbx-bg-gray-200',
       ]"
     >

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

@@ -54,11 +54,6 @@ watch(
               opacityVueModel === 'none' ? 'Transparent' : opacityVueModel
             }}</span>
           </span>
-          <span
-            class="pbx-pointer-events-none pbx-absolute pbx-inset-y-0 pbx-right-0 pbx-ml-3 pbx-flex pbx-items-center pbx-pr-2"
-          >
-            <span class="material-symbols-outlined"> keyboard_arrow_down </span>
-          </span>
         </ListboxButton>
 
         <transition

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

@@ -53,11 +53,6 @@ watch(
               opacityVueModel === 'none' ? 'Transparent' : opacityVueModel
             }}</span>
           </span>
-          <span
-            class="pbx-pointer-events-none pbx-absolute pbx-inset-y-0 pbx-right-0 pbx-ml-3 pbx-flex pbx-items-center pbx-pr-2"
-          >
-            <span class="material-symbols-outlined"> keyboard_arrow_down </span>
-          </span>
         </ListboxButton>
 
         <transition

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

@@ -46,7 +46,7 @@ watch(
       >
         <ListboxButton
           v-if="globalPageLayout"
-          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-bg-white hover:pbx-text-black pbx-text-black pbx-font-sans pbx-font-medium"
+          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-bg-white hover:pbx-text-black pbx-text-black pbx-font-sans pbx-font-medium pbx-border-0"
         >
           <div class="pbx-flex pbx-justify-start pbx-items-center pbx-gap-2">
             <div

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

@@ -19,7 +19,11 @@
       </template>
     </div>
     <div
-      :class="[expanded ? 'pbx-block pbx-bg-sky-50' : 'pbx-hidden']"
+      :class="[
+        expanded
+          ? 'pbx-block pbx-bg-indigo-50 pbx-border-0 pbx-border-solid pbx-border-t pbx-border-red-50'
+          : 'pbx-hidden',
+      ]"
       class="pbx-px-4 pbx-ease-linear pbx-duration-75 pbx-pb-8"
     >
       <slot name="content" />

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

@@ -308,7 +308,7 @@ const handleCloseGlobalPageStyles = async function () {
       :title="translate('Global Page Styles')"
       @closeMainModalBuilder="handleCloseGlobalPageStyles"
     >
-      <div class="pbx-flex pbx-flex-col pbx-gap-2 pbx-pt-4 pbx-pb-2">
+      <div id="pagebuilder-right-menu" 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

package/src/Components/TipTap/TipTapInput.vue

@@ -204,7 +204,7 @@ onMounted(() => {
             ><span>{{ translate('Enter URL') }}</span></label
           ><input
             v-model="urlEnteret"
-            class="pbx-myPrimaryInput pbx-mt-1"
+            class="pbx-myPrimaryInput pbx-mt-1 pbx-w-full"
             type="url"
             placeholder="url"
           />
@@ -234,7 +234,7 @@ onMounted(() => {
                   <button
                     @click="pageBuilderService.toggleTipTapModal(false)"
                     type="button"
-                    class="pbx-myPrimaryTag"
+                    class="pbx-myPrimaryTag pbx-cursor-pointer"
                   >
                     <span class="material-symbols-outlined"> save </span>
                     <span>{{ translate('Save') }}</span>
@@ -249,7 +249,7 @@ onMounted(() => {
                 <button
                   @click="editor.chain().focus().setHardBreak().run()"
                   type="button"
-                  class="pbx-myPrimaryTag"
+                  class="pbx-myPrimaryTag pbx-cursor-pointer"
                 >
                   <span class="material-symbols-outlined"> keyboard_return </span>
                   <span>{{ translate('Line break') }}</span>
@@ -260,7 +260,7 @@ onMounted(() => {
                 <button
                   @click="editor.chain().focus().toggleBold().run()"
                   type="button"
-                  class="pbx-myPrimaryTag"
+                  class="pbx-myPrimaryTag pbx-cursor-pointer"
                   :class="{ 'pbx-bg-myPrimaryLinkColor pbx-text-white': editor.isActive('bold') }"
                 >
                   <span class="material-symbols-outlined"> format_bold </span>
@@ -272,7 +272,7 @@ onMounted(() => {
                 <button
                   @click="handleURL"
                   type="button"
-                  class="pbx-myPrimaryTag"
+                  class="pbx-myPrimaryTag pbx-cursor-pointer"
                   :class="{ 'pbx-bg-myPrimaryLinkColor pbx-text-white': editor.isActive('link') }"
                 >
                   <span class="material-symbols-outlined"> link </span>
@@ -284,7 +284,7 @@ onMounted(() => {
                 <button
                   @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
                   type="button"
-                  class="pbx-myPrimaryTag"
+                  class="pbx-myPrimaryTag pbx-cursor-pointer"
                   :class="{
                     'pbx-bg-myPrimaryLinkColor pbx-text-white': editor.isActive('heading', {
                       level: 2,
@@ -300,7 +300,7 @@ onMounted(() => {
                 <button
                   @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
                   type="button"
-                  class="pbx-myPrimaryTag"
+                  class="pbx-myPrimaryTag pbx-cursor-pointer"
                   :class="{
                     'pbx-bg-myPrimaryLinkColor pbx-text-white': editor.isActive('heading', {
                       level: 3,
@@ -316,7 +316,7 @@ onMounted(() => {
                 <button
                   @click="editor.chain().focus().toggleBulletList().run()"
                   type="button"
-                  class="pbx-myPrimaryTag"
+                  class="pbx-myPrimaryTag pbx-cursor-pointer"
                   :class="{
                     'pbx-bg-myPrimaryLinkColor pbx-text-white': editor.isActive('bulletList'),
                   }"

package/src/css/style.css

@@ -315,23 +315,13 @@
   }
 
   .pbx-myPrimaryInput {
-    @apply pbx-block pbx-pr-8 pbx-text-left pbx-bg-white pbx-w-auto sm:pbx-text-sm pbx-font-normal pbx-text-myPrimaryDarkGrayColor placeholder:pbx-font-normal placeholder:pbx-accent-gray-300 focus:pbx-bg-white pbx-rounded-md pbx-py-3 pbx-px-3 pbx-border pbx-border-gray-300 pbx-shadow-sm focus:pbx-outline-none pbx-h-full pbx-border-solid pbx-font-sans;
-  }
-  .pbx-myPrimaryInputNoBorder {
-    @apply pbx-myPrimaryInput placeholder:pbx-accent-gray-300 focus:pbx-bg-none pbx-rounded-md pbx-py-3 pbx-px-3 pbx-border-none focus:pbx-outline-none focus:pbx-ring-0 focus:pbx-ring-offset-0 focus:pbx-border-none pbx-shadow-none;
-  }
-  .pbx-myPrimaryInputReadonly {
-    @apply pbx-myPrimaryInput pbx-bg-gray-50 focus:pbx-ring-0 focus:pbx-bg-myPrimaryLightGrayColor focus:pbx-border-myPrimaryMediumGrayColor;
+    @apply pbx-w-full pbx-font-sans;
   }
 
   .pbx-myPrimaryInputError {
     @apply pbx-mt-1 pbx-myPrimaryParagraph pbx-block pbx-font-normal pbx-text-myPrimaryErrorColor pbx-text-left pbx-text-sm;
   }
 
-  .pbx-myPrimaryHiddenInputField {
-    @apply pbx-px-0;
-  }
-
   .pbx-myPrimaryTextArea {
     @apply pbx-block pbx-w-full sm:pbx-text-sm pbx-font-normal pbx-text-myPrimaryDarkGrayColor placeholder:pbx-font-normal placeholder:pbx-accent-gray-400 pbx-bg-gray-50 focus:pbx-bg-white pbx-rounded-md pbx-py-3 pbx-px-3 pbx-border pbx-border-gray-300 pbx-shadow-sm focus:pbx-outline-none focus:pbx-ring-2 focus:pbx-ring-myPrimaryLinkColor focus:pbx-border-transparent;
   }
@@ -341,7 +331,7 @@
   }
 
   .pbx-myPrimarySelect {
-    @apply pbx-relative pbx-myPrimaryInput pbx-w-full;
+    @apply pbx-myPrimaryInput;
   }
   .pbx-myPrimaryFakeSelect {
     @apply hover:pbx-ring-myPrimaryLinkColor pbx-border pbx-border-gray-300 pbx-flex pbx-flex-row pbx-justify-between pbx-items-center pbx-myPrimaryGap pbx-py-2.5 pbx-pl-3 pbx-pr-1 pbx-cursor-pointer hover:pbx-border-transparent hover:pbx-ring-2 pbx-rounded-md;
@@ -478,9 +468,24 @@
 
 .pbx-myPrimaryInput,
 .pbx-myPrimarySelect {
+  border: 1px solid #e9e9e9;
+  padding: 0.40625rem 0.625rem;
+  padding-right: 1.75rem;
+  font-size: 0.875rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  line-height: 1.5;
+}
+
+.pbx-myPrimarySelect {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: #fff;
+  background-image: url("data:image/svg+xml,%3Csvg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.792893C0.683417 0.402369 1.31658 0.402369 1.70711 0.792893L4 3.08579L6.29289 0.792893C6.68342 0.402369 7.31658 0.402369 7.70711 0.792893C8.09763 1.18342 8.09763 1.81658 7.70711 2.20711L4.70711 5.20711C4.31658 5.59763 3.68342 5.59763 3.29289 5.20711L0.292893 2.20711C-0.0976311 1.81658 -0.0976311 1.18342 0.292893 0.792893Z' fill='%2335261C' fill-opacity='0.3'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
-  background-size: 1rem;
-  padding-right: 1rem;
+  background-position: right 0.625rem center;
+  background-size: 0.5rem;
 }
 
 .pbx-myPrimaryInput:focus,
@@ -500,6 +505,12 @@
   border: 1px #dee6f0 solid;
 }
 
+#pagebuilder-right-menu hr {
+  border: none;
+  height: 1px;
+  background: oklch(93.6% 0.032 17.717);
+  box-shadow: oklch(93.6% 0.032 17.717);
+}
 #page-builder-wrapper blockquote,
 #page-builder-wrapper dl,
 #page-builder-wrapper dd,

package/src/tests/TestComponents/DemoUnsplash.vue

@@ -183,7 +183,7 @@ onMounted(async () => {
             <button
               @click="searchByOrientation('landscape')"
               type="button"
-              class="pbx-myPrimaryTag"
+              class="pbx-myPrimaryTag pbx-cursor-pointer"
               :class="{
                 'pbx-bg-myPrimaryBrandColor pbx-text-white': getOrientationValue === 'landscape',
                 '': getOrientationValue !== 'landscape',
@@ -194,7 +194,7 @@ onMounted(async () => {
             <button
               @click="searchByOrientation('portrait')"
               type="button"
-              class="pbx-myPrimaryTag"
+              class="pbx-myPrimaryTag pbx-cursor-pointer"
               :class="{
                 'pbx-bg-myPrimaryBrandColor pbx-text-white': getOrientationValue === 'portrait',
                 '': getOrientationValue !== 'portrait',
@@ -205,7 +205,7 @@ onMounted(async () => {
             <button
               @click="searchByOrientation('squarish')"
               type="button"
-              class="pbx-myPrimaryTag"
+              class="pbx-myPrimaryTag pbx-cursor-pointer"
               :class="{
                 'pbx-bg-myPrimaryBrandColor pbx-text-white': getOrientationValue === 'squarish',
                 '': getOrientationValue !== 'squarish',
@@ -251,7 +251,7 @@ onMounted(async () => {
             <button
               v-if="Number(getCurrentPageNumber) > 1"
               :disabled="Number(getCurrentPageNumber) < 1"
-              class="pbx-myPrimaryTag"
+              class="pbx-myPrimaryTag pbx-cursor-pointer"
               @click="previousPage(Number(getCurrentPageNumber--))"
             >
               {{
@@ -264,7 +264,7 @@ onMounted(async () => {
             </span>
             <button
               :disabled="Number(getCurrentPageNumber) >= getUnsplashImages.total_pages"
-              class="pbx-myPrimaryTag"
+              class="pbx-myPrimaryTag pbx-cursor-pointer"
               :class="{
                 'pbx-opacity-50': Number(getCurrentPageNumber) >= getUnsplashImages.total_pages,
               }"

package/src/tests/componentsArray.test.json

@@ -40,7 +40,7 @@
     "title": "Text"
   },
   {
-    "html_code": "<section data-component-title=\"YouTube Video\">\n    <div class=\"pbx-py-4\">\n    <div class=\"pbx-mx-auto pbx-max-w-7xl pbx-pt-6 pbx-pb-6\">\n    <div id=\"youtube-video\" class=\"pbx-w-full pbx-aspect-video pbx-p-4\">\n\n    <iframe frameborder=\"0\" allowfullscreen=\"\" class=\"pbx-w-full pbx-aspect-video\" src=\"https://www.youtube.com/embed/pJvwV1Fm0vU\" allow=\"accelerometer; autoplay; clipboard-write;\">\n    </iframe>\n    </div>\n    </div>\n    </div>\n    </section>",
+    "html_code": "<section data-component-title=\"YouTube Video\">\n    <div class=\"pbx-py-4\">\n    <div class=\"pbx-mx-auto pbx-max-w-7xl pbx-pt-6 pbx-pb-6\">\n    <div id=\"youtube-video\" class=\"pbx-aspect-video pbx-p-4\">\n\n    <iframe frameborder=\"0\" allowfullscreen=\"\" class=\"pbx-w-full pbx-aspect-video\" src=\"https://www.youtube.com/embed/pJvwV1Fm0vU\" allow=\"accelerometer; autoplay; clipboard-write;\">\n    </iframe>\n    </div>\n    </div>\n    </div>\n    </section>",
     "id": "33a26684-eb95-43c9-adb4-d7bce0ca60f7",
     "title": "YouTube Video"
   },