@myissue/vue-website-page-builder 3.4.18 → 3.4.19

package/package.json

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

@@ -25,6 +25,9 @@ const elementTag = computed(() => {
   return getElement.value?.tagName
 })
 
+const canMoveUp = computed(() => pageBuilderService.canMoveUp())
+const canMoveDown = computed(() => pageBuilderService.canMoveDown())
+
 const getShowModalTipTap = computed(() => {
   const result = pageBuilderStateStore.getShowModalTipTap
 
@@ -39,36 +42,36 @@ const getComponent = computed(() => {
 })
 
 // hanlde Tip Tap modal
-const typeModal = ref('')
-const gridColumnModal = ref(Number(1))
-const titleModal = ref('')
-const descriptionModal = ref('')
-const firstButtonModal = ref('')
-const secondButtonModal = ref(null)
-const thirdButtonModal = ref(null)
+const typeModalTipTap = ref('')
+const gridColumnModalTipTap = ref(Number(1))
+const titleModalTipTap = ref('')
+const descriptionModalTipTap = ref('')
+const firstButtonModalTipTap = ref('')
+const secondButtonModalTipTap = ref(null)
+const thirdButtonModalTipTap = ref(null)
 // set dynamic modal handle functions
-const firstModalButtonFunctionDynamicModalBuilder = ref(null)
-const secondModalButtonFunctionDynamicModalBuilder = ref(null)
-const thirdModalButtonFunctionDynamicModalBuilder = ref(null)
+const firstModalButtonFunctionDynamicModalBuilderTipTap = ref(null)
+const secondModalButtonFunctionDynamicModalBuilderTipTap = ref(null)
+const thirdModalButtonFunctionDynamicModalBuilderTipTap = ref(null)
 
 const handleModalPreviewTiptap = function () {
   pageBuilderService.toggleTipTapModal(true)
 
-  typeModal.value = 'success'
-  gridColumnModal.value = 2
-  titleModal.value = translate('Manage Content')
-  descriptionModal.value = null
-  firstButtonModal.value = null
-  secondButtonModal.value = null
-  thirdButtonModal.value = 'Save'
+  typeModalTipTap.value = 'success'
+  gridColumnModalTipTap.value = 2
+  titleModalTipTap.value = translate('Manage Content')
+  descriptionModalTipTap.value = null
+  firstButtonModalTipTap.value = null
+  secondButtonModalTipTap.value = null
+  thirdButtonModalTipTap.value = 'Save'
 
   // handle click
 
-  firstModalButtonFunctionDynamicModalBuilder.value = function () {
+  firstModalButtonFunctionDynamicModalBuilderTipTap.value = function () {
     pageBuilderService.toggleTipTapModal(false)
   }
 
-  thirdModalButtonFunctionDynamicModalBuilder.value = function () {
+  thirdModalButtonFunctionDynamicModalBuilderTipTap.value = function () {
     pageBuilderService.toggleTipTapModal(true)
   }
 }
@@ -146,20 +149,20 @@ const handleModalIframeSrc = function () {
   // open modal to true
   showModalIframeSrc.value = true
 
-  typeModal.value = 'success'
-  gridColumnModal.value = 2
-  titleModal.value = 'Add video url'
-  descriptionModal.value = null
-  firstButtonModal.value = translate('Close')
-  secondButtonModal.value = 'Save'
-  thirdButtonModal.value = null
+  typeModalTipTap.value = 'success'
+  gridColumnModalTipTap.value = 2
+  titleModalTipTap.value = 'Add video url'
+  descriptionModalTipTap.value = null
+  firstButtonModalTipTap.value = translate('Close')
+  secondButtonModalTipTap.value = 'Save'
+  thirdButtonModalTipTap.value = null
 
   // handle click
-  firstModalButtonFunctionDynamicModalBuilder.value = function () {
+  firstModalButtonFunctionDynamicModalBuilderTipTap.value = function () {
     showModalIframeSrc.value = false
   }
   // handle click
-  secondModalButtonFunctionDynamicModalBuilder.value = function () {
+  secondModalButtonFunctionDynamicModalBuilderTipTap.value = function () {
     const isNotValidated = validateURL()
     if (isNotValidated) {
       return
@@ -190,22 +193,72 @@ const handleModalIframeSrc = function () {
 }
 
 const openOptionsMoreOpen = ref(false)
+
+const handleShowHTMLEditor = async () => {
+  openOptionsMoreOpen.value = false
+  pageBuilderStateStore.setShowModalHTMLEditor(true)
+}
+
+const showModalDeleteComponent = ref(false)
+// use dynamic model
+const typeModal = ref('')
+const gridColumnModal = ref(Number(1))
+const titleModal = ref('')
+const descriptionModal = ref('')
+const firstButtonModal = ref('')
+const secondButtonModal = ref(null)
+const thirdButtonModal = ref(null)
+// set dynamic modal handle functions
+const firstModalButtonFunctionDynamicModalBuilder = ref(null)
+const secondModalButtonFunctionDynamicModalBuilder = ref(null)
+const thirdModalButtonFunctionDynamicModalBuilder = ref(null)
+
+// remove component
+const handleDelete = function () {
+  showModalDeleteComponent.value = true
+  typeModal.value = 'delete'
+  gridColumnModal.value = 2
+  titleModal.value = translate('Remove Component?')
+  descriptionModal.value = translate('Are you sure you want to remove this Component?')
+  firstButtonModal.value = translate('Close')
+  secondButtonModal.value = null
+  thirdButtonModal.value = translate('Delete')
+
+  // handle click
+  firstModalButtonFunctionDynamicModalBuilder.value = function () {
+    showModalDeleteComponent.value = false
+  }
+  //
+  // handle click
+  thirdModalButtonFunctionDynamicModalBuilder.value = async function () {
+    await pageBuilderService.deleteComponentFromDOM()
+
+    showModalDeleteComponent.value = false
+  }
+  // end modal
+}
 </script>
 <template v-if="getElement">
   <div>
     <DynamicModalBuilder
       :showDynamicModalBuilder="showModalIframeSrc"
       maxWidth="2xl"
-      :type="typeModal"
-      :gridColumnAmount="gridColumnModal"
-      :title="titleModal"
-      :description="descriptionModal"
-      :firstButtonText="firstButtonModal"
-      :secondButtonText="secondButtonModal"
-      :thirdButtonText="thirdButtonModal"
-      @firstModalButtonFunctionDynamicModalBuilder="firstModalButtonFunctionDynamicModalBuilder"
-      @secondModalButtonFunctionDynamicModalBuilder="secondModalButtonFunctionDynamicModalBuilder"
-      @thirdModalButtonFunctionDynamicModalBuilder="thirdModalButtonFunctionDynamicModalBuilder"
+      :type="typeModalTipTap"
+      :gridColumnAmount="gridColumnModalTipTap"
+      :title="titleModalTipTap"
+      :description="descriptionModalTipTap"
+      :firstButtonText="firstButtonModalTipTap"
+      :secondButtonText="secondButtonModalTipTap"
+      :thirdButtonText="thirdButtonModalTipTap"
+      @firstModalButtonFunctionDynamicModalBuilderTipTap="
+        firstModalButtonFunctionDynamicModalBuilderTipTap
+      "
+      @secondModalButtonFunctionDynamicModalBuilderTipTap="
+        secondModalButtonFunctionDynamicModalBuilderTipTap
+      "
+      @thirdModalButtonFunctionDynamicModalBuilderTipTap="
+        thirdModalButtonFunctionDynamicModalBuilderTipTap
+      "
     >
       <header></header>
       <main>
@@ -237,6 +290,30 @@ const openOptionsMoreOpen = ref(false)
       :simpleModal="true"
       :showDynamicModalBuilder="getShowModalTipTap"
       maxWidth="6xl"
+      :type="typeModalTipTap"
+      :gridColumnAmount="gridColumnModalTipTap"
+      :title="titleModalTipTap"
+      :description="descriptionModalTipTap"
+      :firstButtonText="firstButtonModalTipTap"
+      :secondButtonText="secondButtonModalTipTap"
+      :thirdButtonText="thirdButtonModalTipTap"
+      @firstModalButtonFunctionDynamicModalBuilder="
+        firstModalButtonFunctionDynamicModalBuilderTipTap
+      "
+      @secondModalButtonFunctionDynamicModalBuilder="
+        secondModalButtonFunctionDynamicModalBuilderTipTap
+      "
+      @thirdModalButtonFunctionDynamicModalBuilder="
+        thirdModalButtonFunctionDynamicModalBuilderTipTap
+      "
+    >
+      <header></header>
+      <main class="pbx-overflow-y-auto">
+        <TipTapInput></TipTapInput>
+      </main>
+    </DynamicModalBuilder>
+    <DynamicModalBuilder
+      :showDynamicModalBuilder="showModalDeleteComponent"
       :type="typeModal"
       :gridColumnAmount="gridColumnModal"
       :title="titleModal"
@@ -249,11 +326,8 @@ const openOptionsMoreOpen = ref(false)
       @thirdModalButtonFunctionDynamicModalBuilder="thirdModalButtonFunctionDynamicModalBuilder"
     >
       <header></header>
-      <main class="pbx-overflow-y-auto">
-        <TipTapInput></TipTapInput>
-      </main>
+      <main></main>
     </DynamicModalBuilder>
-
     <MediaLibraryModal
       :open="showMediaLibraryModal"
       :title="titleMedia"
@@ -365,28 +439,69 @@ const openOptionsMoreOpen = ref(false)
     <transition name="popup-fade">
       <div
         v-if="openOptionsMoreOpen"
-        class="pbx-fixed pbx-z-40 pbx-top-10 pbx-right-0 lg:pbx-w-72 md:pbx-w-64 pbx-w-full pbx-select-none"
+        class="pbx-fixed pbx-z-40 pbx-top-10 pbx-right-0 lg:pbx-w-72 md:pbx-w-72 pbx-w-full pbx-select-none"
       >
         <div
           class="pbx-rounded-3xl pbx-border pbx-border-gray-100 pbx-bg-white pbx-shadow-lg pbx-pt-4 pbx-pb-4 pbx-flex pbx-flex-col pbx-overflow-y-auto pbx-max-h-[80vh] pbx-mx-4 pbx-px-2"
         >
-          <div
-            class="pbx-flex pbx-gap-2 pbx-items-center pbx-justify-between pbx-border-b pbx-border-gray-200 pbx-pb-4 pbx-pl-2"
-          >
-            <span class="pbx-text-black pbx-font-medium">Options</span>
+          <div class="pbx-flex pbx-flex-col">
+            <!-- content start -->
+            <!-- move up and down start -->
+            <div
+              v-if="getElement && getComponent"
+              @click="pageBuilderService.reorderComponent(-1)"
+              :disabled="!canMoveUp"
+              class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-cursor-pointer hover:pbx-bg-red-50 pbx-py-2 pbx-px-2 pbx-rounded-full"
+            >
+              <div
+                class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+                :class="[
+                  canMoveUp
+                    ? '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',
+                ]"
+              >
+                <span class="material-symbols-outlined"> move_up </span>
+              </div>
+              <div class="pbx-text-sm">Move up</div>
+            </div>
+            <div
+              v-if="getElement && getComponent"
+              @click="pageBuilderService.reorderComponent(1)"
+              :disabled="!canMoveDown"
+              class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-cursor-pointer hover:pbx-bg-red-50 pbx-py-2 pbx-px-2 pbx-rounded-full"
+            >
+              <div
+                class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+                :class="[
+                  canMoveDown
+                    ? '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',
+                ]"
+              >
+                <span class="material-symbols-outlined"> move_down </span>
+              </div>
+              <div class="pbx-text-sm">Move down</div>
+            </div>
+            <!-- move up and down end -->
+
+            <!-- delete component start -->
 
-            <!-- Close Modal start -->
             <div
-              @click="openOptionsMoreOpen = !openOptionsMoreOpen"
-              class="pbx-h-8 pbx-w-8 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-black pbx-text-white pbx-aspect-square hover:pbx-fill-white focus-visible:pbx-ring-0 hover:pbx-outline-3 hover:pbx-outline-offset-2 hover:pbx-outline-black pbx-transition-all pbx-duration-100"
+              v-if="getElement && getComponent"
+              @click="handleDelete()"
+              class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-cursor-pointer hover:pbx-bg-red-50 pbx-py-2 pbx-px-2 pbx-rounded-full"
             >
-              <span class="material-symbols-outlined"> close_small </span>
+              <div
+                class="pbx-h- pbx-w-8 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-myPrimaryErrorColor hover:pbx-text-white pbx-text-myPrimaryErrorColor"
+              >
+                <span class="material-symbols-outlined"> delete_forever </span>
+              </div>
+              <div class="pbx-text-sm">Delete component</div>
             </div>
-            <!-- Close Modal Start -->
-          </div>
 
-          <div class="pbx-flex pbx-flex-col pbx-gap-4 pbx-mt-6">
-            <!-- content start -->
+            <!-- delete component end -->
+
             <div
               v-if="getElement && getComponent"
               @click="
@@ -395,7 +510,7 @@ const openOptionsMoreOpen = ref(false)
                   pageBuilderService.duplicateComponent()
                 }
               "
-              class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-cursor-pointer"
+              class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-cursor-pointer hover:pbx-bg-red-50 pbx-py-2 pbx-px-2 pbx-rounded-full"
             >
               <div
                 class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
@@ -404,6 +519,19 @@ const openOptionsMoreOpen = ref(false)
               </div>
               <div class="pbx-text-sm">Duplicate component</div>
             </div>
+            <div
+              v-if="getElement && getComponent"
+              @click="handleShowHTMLEditor"
+              class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-cursor-pointer hover:pbx-bg-red-50 pbx-py-2 pbx-px-2 pbx-rounded-full"
+            >
+              <div
+                class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
+              >
+                <span class="material-symbols-outlined"> deployed_code </span>
+              </div>
+              <div class="pbx-text-sm">{{ translate('HTML Editor') }}</div>
+            </div>
+
             <!-- content end -->
           </div>
         </div>

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

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, nextTick } from 'vue'
+import { ref, computed, watch, nextTick } from 'vue'
 import { sharedPageBuilderStore } from '../../../../stores/shared-store'
 import ModalBuilder from '../../../../Components/Modals/ModalBuilder.vue'
 import EditorAccordion from '../EditorAccordion.vue'
@@ -18,6 +18,7 @@ const props = defineProps({
 })
 
 const getElement = computed(() => pageBuilderStateStore.getElement)
+const getShowModalHTMLEditor = computed(() => pageBuilderStateStore.getShowModalHTMLEditor)
 
 const elementHTML = computed(() => {
   if (!getElement.value || !(getElement.value instanceof HTMLElement)) {
@@ -26,24 +27,26 @@ const elementHTML = computed(() => {
   return getElement.value.outerHTML
 })
 
-const showModalHTMLEditor = ref(false)
-
 const editableHtml = ref('')
 const editableComponents = ref('')
 
-const handleShowHTMLEditor = async () => {
-  showModalHTMLEditor.value = true
+watch(getShowModalHTMLEditor, async (newVal) => {
+  if (newVal) {
+    if (!props.globalPage) {
+      editableHtml.value = elementHTML.value
+      return
+    }
 
-  if (!props.globalPage) {
-    editableHtml.value = elementHTML.value
-    return
+    editableComponents.value = await pageBuilderService.generateHtmlFromComponents()
   }
+})
 
-  editableComponents.value = await pageBuilderService.generateHtmlFromComponents()
+const handleShowHTMLEditor = async () => {
+  pageBuilderStateStore.setShowModalHTMLEditor(true)
 }
 
 const handleCloseHTMLEditor = () => {
-  showModalHTMLEditor.value = false
+  pageBuilderStateStore.setShowModalHTMLEditor(false)
 }
 
 const isLoading = ref(false)
@@ -62,7 +65,7 @@ const handleSaveChangesElement = async () => {
     return
   }
 
-  showModalHTMLEditor.value = false
+  pageBuilderStateStore.setShowModalHTMLEditor(false)
   isLoading.value = false
 }
 
@@ -80,7 +83,7 @@ const handleSaveChangesComponents = async () => {
     return
   }
 
-  showModalHTMLEditor.value = false
+  pageBuilderStateStore.setShowModalHTMLEditor(false)
   isLoading.value = false
 }
 </script>
@@ -101,7 +104,7 @@ const handleSaveChangesComponents = async () => {
   </EditorAccordion>
   <ModalBuilder
     maxWidth="7xl"
-    :showModalBuilder="showModalHTMLEditor"
+    :showModalBuilder="getShowModalHTMLEditor"
     :title="translate('HTML Editor')"
     @closeMainModalBuilder="handleCloseHTMLEditor"
   >

package/src/stores/page-builder-state.ts

@@ -52,6 +52,7 @@ interface PageBuilderState {
   components: ComponentObject[]
   basePrimaryImage: string | null
   configPageBuilder: PageBuilderConfig | null
+  showModalHTMLEditor: boolean
 
   // Media Library State
   applyImageToSelection: ImageObject
@@ -114,6 +115,7 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     components: [],
     basePrimaryImage: null,
     configPageBuilder: null,
+    showModalHTMLEditor: false,
 
     // Media Library State
     applyImageToSelection: { src: '' },
@@ -260,6 +262,9 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     getPageBuilderConfig(state: PageBuilderState): PageBuilderConfig | null {
       return state.configPageBuilder
     },
+    getShowModalHTMLEditor(state: PageBuilderState): boolean {
+      return state.showModalHTMLEditor
+    },
 
     getApplyImageToSelection(state: PageBuilderState): ImageObject {
       return state.applyImageToSelection
@@ -450,6 +455,10 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
       this.configPageBuilder = payload
     },
 
+    setShowModalHTMLEditor(payload: boolean): void {
+      this.showModalHTMLEditor = payload
+    },
+
     setApplyImageToSelection(payload: ImageObject): void {
       this.applyImageToSelection = payload
     },