@myissue/vue-website-page-builder 3.0.26 → 3.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "v3.0.26",
+  "version": "v3.0.29",
   "description": "🚧 DEVELOPMENT VERSION - Vue.js page builder component with drag & drop functionality. Not ready for production use.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

package/src/Components/Modals/DynamicModal.vue

@@ -80,7 +80,7 @@ const thirdButton = function () {
     <slot name="content" />
 
     <div
-      class="w-full relative inline-block align-bottom text-left overflow-hidden transform transition-all sm:align-middle"
+      class="font-sans w-full relative inline-block align-bottom text-left overflow-hidden transform transition-all sm:align-middle"
     >
       <template v-if="simpleModal !== true">
         <div class="flex items-center border-b border-gray-200 p-4 mb-2">

package/src/Components/Modals/Modal.vue

@@ -1,102 +1,92 @@
 <script setup>
-import { computed, onMounted, onUnmounted, watch } from "vue";
+import { computed, onMounted, onUnmounted, watch } from 'vue'
 import {
-    Dialog,
-    DialogOverlay,
-    DialogTitle,
-    TransitionChild,
-    TransitionRoot,
-} from "@headlessui/vue";
+  Dialog,
+  DialogOverlay,
+  DialogTitle,
+  TransitionChild,
+  TransitionRoot,
+} from '@headlessui/vue'
 
 const props = defineProps({
-    show: {
-        type: Boolean,
-        default: false,
-    },
-    maxWidth: {
-        type: String,
-        default: "2xl",
-    },
-    minHeight: {
-        type: String,
-    },
-    maxHeight: {
-        type: String,
-    },
-});
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  maxWidth: {
+    type: String,
+    default: '2xl',
+  },
+  minHeight: {
+    type: String,
+  },
+  maxHeight: {
+    type: String,
+  },
+})
 
-const emit = defineEmits(["close"]);
+const emit = defineEmits(['close'])
 
 const close = () => {
-    emit("close");
-};
+  emit('close')
+}
 
 const maxWidthClass = computed(() => {
-    return {
-        sm: "sm:max-w-sm",
-        md: "sm:max-w-md",
-        lg: "sm:max-w-lg",
-        xl: "sm:max-w-xl",
-        "2xl": "sm:max-w-2xl",
-        "3xl": "sm:max-w-3xl",
-        "4xl": "sm:max-w-4xl",
-        "5xl": "sm:max-w-5xl",
-    }[props.maxWidth];
-});
+  return {
+    sm: 'sm:max-w-sm',
+    md: 'sm:max-w-md',
+    lg: 'sm:max-w-lg',
+    xl: 'sm:max-w-xl',
+    '2xl': 'sm:max-w-2xl',
+    '3xl': 'sm:max-w-3xl',
+    '4xl': 'sm:max-w-4xl',
+    '5xl': 'sm:max-w-5xl',
+  }[props.maxWidth]
+})
 </script>
 
 <template>
-    <teleport to="body">
-        <TransitionRoot :show="show" as="template">
-            <Dialog
-                as="div"
-                class="fixed z-30 inset-0 overflow-y-auto"
-                @close="close"
+  <teleport to="body">
+    <TransitionRoot :show="show" as="template">
+      <Dialog as="div" class="font-sans fixed z-30 inset-0 overflow-y-auto" @close="close">
+        <div class="flex items-end justify-center text-center sm:block sm:p-0">
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-100"
+            enter-from="opacity-0"
+            enter-to="opacity-100"
+            leave="ease-in duration-100"
+            leave-from="opacity-100"
+            leave-to="opacity-0"
+          >
+            <DialogOverlay class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          </TransitionChild>
+          <!-- This element is to trick the browser into centering the modal contents. -->
+          <span aria-hidden="true" class="hidden sm:inline-block sm:align-middle sm:h-screen"
+            >&#8203;</span
+          >
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-100"
+            enter-from="opacity-0 scale-95"
+            enter-to="opacity-100 scale-100"
+            leave="ease-in duration-100"
+            leave-from="opacity-100 scale-100"
+            leave-to="opacity-0 scale-95"
+          >
+            <div
+              class="relative inline-block align-bottom bg-white rounded-xl text-left overflow-hidden shadow-xl transform transition-all sm:align-top top-4 sm:w-full w-[96%]"
+              :class="[
+                maxWidthClass ? maxWidthClass : '',
+                minHeight ? minHeight : '',
+                maxHeight ? maxHeight : '',
+              ]"
             >
-                <div
-                    class="flex items-end justify-center text-center sm:block sm:p-0"
-                >
-                    <TransitionChild
-                        as="template"
-                        enter="ease-out duration-100"
-                        enter-from="opacity-0"
-                        enter-to="opacity-100"
-                        leave="ease-in duration-100"
-                        leave-from="opacity-100"
-                        leave-to="opacity-0"
-                    >
-                        <DialogOverlay
-                            class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
-                        />
-                    </TransitionChild>
-                    <!-- This element is to trick the browser into centering the modal contents. -->
-                    <span
-                        aria-hidden="true"
-                        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-                        >&#8203;</span
-                    >
-                    <TransitionChild
-                        as="template"
-                        enter="ease-out duration-100"
-                        enter-from="opacity-0 scale-95"
-                        enter-to="opacity-100 scale-100"
-                        leave="ease-in duration-100"
-                        leave-from="opacity-100 scale-100"
-                        leave-to="opacity-0 scale-95"
-                    >
-                        <div
-                            class="relative inline-block align-bottom bg-white rounded-xl text-left overflow-hidden shadow-xl transform transition-all sm:align-top top-4 sm:w-full w-[96%]"
-                            :class="[
-                                maxWidthClass ? maxWidthClass : '',
-                                minHeight ? minHeight : '',
-                                maxHeight ? maxHeight : '',
-                            ]"
-                        >
-                            <slot></slot>
-                        </div>
-                    </TransitionChild>
-                </div>
-            </Dialog>
-        </TransitionRoot>
-    </teleport>
+              <slot></slot>
+            </div>
+          </TransitionChild>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+  </teleport>
 </template>

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

@@ -20,7 +20,7 @@ const getRestoredElement = computed(() => {
 
 <template>
   <EditorAccordion>
-    <template #title>Element Editor</template>
+    <template #title>Selected HTML Element</template>
     <template #content>
       <div class="flex flex-row flex-wrap gap-2 mt-2"></div>
       <div>

package/src/Components/PageBuilder/NoneCustomMediaLibraryComponent.vue

@@ -1,3 +1,5 @@
 <template>
-  <div>NoneCustomMediaLibraryComponent here for the page builder to add media if needed</div>
+  <div class="font-sans">
+    <div>NoneCustomMediaLibraryComponent here for the page builder to add media if needed</div>
+  </div>
 </template>

package/src/Components/PageBuilder/NoneCustomSearchComponent.vue

@@ -63,7 +63,7 @@ const getSvgPreview = (title: string) => {
 </style>
 
 <template>
-  <div class="p-4">
+  <div class="font-sans p-4">
     <!-- Helper Components Section -->
     <div class="mb-8">
       <h3 class="myQuaternaryHeader mb-4">Helper Components</h3>

package/src/Components/Search/SearchComponents.vue

@@ -30,7 +30,7 @@ const firstButton = function () {
 <template>
   <Modal maxWidth="5xl" :show="show" @close="firstButton" minHeight="" maxHeight="">
     <div
-      class="w-full relative inline-block align-bottom text-left overflow-hidden transform transition-all sm:align-middle"
+      class="font-sans w-full relative inline-block align-bottom text-left overflow-hidden transform transition-all sm:align-middle"
     >
       <div class="flex items-center border-b border-gray-200 p-4 mb-2">
         <div class="flex-1">

package/src/PageBuilder/PageBuilder.vue

@@ -225,7 +225,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div id="builder-container">
+  <div id="builder-container" class="font-sans">
     <SearchComponents
       v-if="showModalAddComponent"
       :show="showModalAddComponent"
@@ -414,29 +414,45 @@ onMounted(async () => {
                     </span>
                   </div>
                 </button>
-                <button
-                  type="button"
-                  @click="
-                    () => {
-                      pageBuilderStateStore.setMenuRight(false)
-                      pageBuilderStateStore.setElement(null)
-                      pageBuilderStateStore.setComponent(null)
-                      handlePageBuilderPreview()
-                    }
-                  "
-                  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"
-                >
-                  <span class="material-symbols-outlined"> visibility </span>
-                </button>
+                <div class="flex items-center justify-center gap-4">
+                  <button
+                    type="button"
+                    @click="
+                      () => {
+                        pageBuilderStateStore.setMenuRight(false)
+                        pageBuilderStateStore.setElement(null)
+                        pageBuilderStateStore.setComponent(null)
+                        handlePageBuilderPreview()
+                      }
+                    "
+                  >
+                    <div class="flex items-center justify-center gap-2">
+                      <span class="lg:block hidden"> Preview </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"
+                      >
+                        <span class="myMediumIcon material-symbols-outlined"> visibility </span>
+                      </span>
+                    </div>
+                  </button>
 
-                <button
-                  type="button"
-                  v-if="getMenuRight === false"
-                  @click="pageBuilderStateStore.setMenuRight(true)"
-                  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"
-                >
-                  <span class="material-symbols-outlined"> palette </span>
-                </button>
+                  <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"> Design </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"
+                      >
+                        <span class="myMediumIcon material-symbols-outlined"> palette </span>
+                      </span>
+                    </div>
+                  </button>
+                </div>
               </div>
             </div>
           </div>

package/src/css/app.css

@@ -566,17 +566,14 @@ h3 {
 /* CSS for Vue datepicker # start */
 :root {
   /*General*/
-  --dp-font-family:
-    'Jost', blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, 'Open Sans',
-    'Helvetica Neue', sans-serif !important;
   --dp-border-radius: 40px; /*Configurable border-radius*/
   --dp-cell-border-radius: 4px; /*Specific border radius for the calendar cell*/
   --dp-common-transition: all 0.1s ease-in; /*Generic transition applied on buttons and calendar cells*/
 }
 
 #builder-container {
-  font-family: 'Jost', sans-serif;
 }
+
 .dp__action_row {
   display: flex !important;
   align-items: center !important;