@myissue/vue-website-page-builder 3.0.20 → 3.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "v3.0.20",
+  "version": "v3.0.21",
   "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

@@ -1,9 +1,9 @@
 <script setup>
-import Modal from '@/Components/Modals/Modal.vue';
-import {} from '@headlessui/vue';
+import Modal from '@/Components/Modals/Modal.vue'
+import {} from '@headlessui/vue'
 
 defineProps({
-  show: {
+  showDynamicModal: {
     type: Boolean,
     default: false,
     required: true,
@@ -52,35 +52,31 @@ defineProps({
   thirdButtonText: {
     type: String,
   },
-});
+})
 
 const emit = defineEmits([
   'firstModalButtonFunction',
   'secondModalButtonFunction',
   'thirdModalButtonFunction',
-]);
+])
 
 // first button function
 const firstButton = function () {
-  emit('firstModalButtonFunction');
-};
+  emit('firstModalButtonFunction')
+}
 // second button  function
 const secondButton = function () {
-  emit('secondModalButtonFunction');
-};
+  emit('secondModalButtonFunction')
+}
 
 // third button function
 const thirdButton = function () {
-  emit('thirdModalButtonFunction');
-};
+  emit('thirdModalButtonFunction')
+}
 </script>
 
 <template>
-  <Modal
-    :show="show"
-    @close="firstButton"
-    :maxWidth="maxWidth"
-  >
+  <Modal :show="showDynamicModal" @close="firstButton" :maxWidth="maxWidth">
     <slot name="content" />
 
     <div
@@ -103,9 +99,7 @@ const thirdButton = function () {
                 v-if="type === 'warning'"
                 class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryErrorColor hover:text-white"
               >
-                <span class="material-symbols-outlined">
-                  notification_important
-                </span>
+                <span class="material-symbols-outlined"> notification_important </span>
               </div>
 
               <div
@@ -122,10 +116,7 @@ const thirdButton = function () {
                 <span class="material-symbols-outlined"> warning </span>
               </div>
 
-              <h3
-                as="h3"
-                class="myQuaternaryHeader my-0 py-0"
-              >
+              <h3 as="h3" class="myQuaternaryHeader my-0 py-0">
                 {{ title }}
               </h3>
             </div>
@@ -142,10 +133,7 @@ const thirdButton = function () {
 
       <div :class="{ 'p-4': simpleModal !== true }">
         <template v-if="simpleModal !== true">
-          <div
-            v-html="description"
-            class="myPrimaryParagraph mb-6"
-          ></div>
+          <div v-html="description" class="myPrimaryParagraph mb-6"></div>
         </template>
 
         <slot name="header"></slot>
@@ -188,10 +176,7 @@ const thirdButton = function () {
               >
                 <div>
                   <Transition name="bounce">
-                    <div
-                      role="status"
-                      class="flex items-center"
-                    >
+                    <div role="status" class="flex items-center">
                       <svg
                         aria-hidden="true"
                         class="w-4 h-4 animate-spin text-white-600 fill-gray-800 flex items-center"
@@ -240,10 +225,7 @@ const thirdButton = function () {
                 >
                   <div>
                     <Transition name="bounce">
-                      <div
-                        role="status"
-                        class="flex items-center"
-                      >
+                      <div role="status" class="flex items-center">
                         <svg
                           aria-hidden="true"
                           class="w-4 h-4 animate-spin text-white-600 fill-gray-800 flex items-center"
@@ -290,10 +272,7 @@ const thirdButton = function () {
                 >
                   <div>
                     <Transition name="bounce">
-                      <div
-                        role="status"
-                        class="flex items-center"
-                      >
+                      <div role="status" class="flex items-center">
                         <svg
                           aria-hidden="true"
                           class="w-4 h-4 animate-spin text-white-600 fill-gray-800 flex items-center"
@@ -341,10 +320,7 @@ const thirdButton = function () {
                 >
                   <div>
                     <Transition name="bounce">
-                      <div
-                        role="status"
-                        class="flex items-center"
-                      >
+                      <div role="status" class="flex items-center">
                         <svg
                           aria-hidden="true"
                           class="w-4 h-4 animate-spin text-white-600 fill-gray-800 flex items-center"
@@ -392,10 +368,7 @@ const thirdButton = function () {
                 >
                   <div>
                     <Transition name="bounce">
-                      <div
-                        role="status"
-                        class="flex items-center"
-                      >
+                      <div role="status" class="flex items-center">
                         <svg
                           aria-hidden="true"
                           class="w-4 h-4 animate-spin text-white-600 fill-gray-800 flex items-center"

package/src/Components/PageBuilder/DropdownsPlusToggles/OptionsDropdown.vue

@@ -104,7 +104,7 @@ const settingsSlideOverButton = function () {
       <PageBuilderSettings> </PageBuilderSettings>
     </SlideOverRight>
     <DynamicModal
-      :show="showModalDeleteAllComponents"
+      :showDynamicModal="showModalDeleteAllComponents"
       :type="typeModal"
       :gridColumnAmount="gridColumnModal"
       :title="titleModal"

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

@@ -51,7 +51,7 @@ const deleteComponent = function (e) {
 
 <template>
   <DynamicModal
-    :show="showModalDeleteComponent"
+    :showDynamicModal="showModalDeleteComponent"
     :type="typeModal"
     :gridColumnAmount="gridColumnModal"
     :title="titleModal"

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

@@ -205,7 +205,7 @@ const handleModalIframeSrc = function () {
 <template>
   <div>
     <DynamicModal
-      :show="showModalIframeSrc"
+      :showDynamicModal="showModalIframeSrc"
       maxWidth="2xl"
       :type="typeModal"
       :gridColumnAmount="gridColumnModal"
@@ -237,7 +237,7 @@ const handleModalIframeSrc = function () {
     </DynamicModal>
     <DynamicModal
       :simpleModal="true"
-      :show="getShowModalTipTap"
+      :showDynamicModal="getShowModalTipTap"
       maxWidth="5xl"
       :type="typeModal"
       :gridColumnAmount="gridColumnModal"

package/src/Components/TipTap/TipTapInput.vue

@@ -181,7 +181,7 @@ onMounted(() => {
 <template>
   <div>
     <DynamicModal
-      :show="showModalUrl"
+      :showDynamicModal="showModalUrl"
       :type="typeModal"
       :gridColumnAmount="gridColumnModal"
       :title="titleModal"

package/src/PageBuilder/PageBuilder.vue

@@ -435,7 +435,7 @@ onMounted(async () => {
                   @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"> gesture </span>
+                  <span class="material-symbols-outlined"> palette </span>
                 </button>
               </div>
             </div>

package/src/css/app.css

@@ -1,3 +1,6 @@
+/* Google Material Icons - Auto-loaded for vue-website-page-builder */
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -563,8 +566,9 @@ 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-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*/