@myissue/vue-website-page-builder 3.0.18 → 3.0.19

package/src/utils/html-elements/componentHelpers.ts

@@ -0,0 +1,101 @@
+interface ComponentHelper {
+  html_code: string
+  id: string | null
+  title: string
+  icon: string
+}
+
+const componentHelpers: ComponentHelper[] = [
+  {
+    html_code: `
+    <section>
+    <div class="relative py-4">
+    <div class="mx-auto max-w-7xl lg:px-4 px-2">
+    <div>
+    <p><strong>Text</strong></p><p>Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Erat nam at lectus urna duis convallis convallis. Congue mauris rhoncus aenean vel elit scelerisque. 
+    Turpis tincidunt id aliquet risus feugiat in ante. Tincidunt dui ut ornare lectus sit. Ipsum dolor sit amet consectetur. Viverra ipsum nunc aliquet bibendum enim facilisis gravida neque convallis.<br><br>Dignissim sodales ut eu sem integer vitae justo eget magna. 
+    Ac turpis egestas maecenas pharetra convallis. Mauris sit amet massa vitae. Ut tellus elementum sagittis vitae et. Sed risus ultricies tristique nulla aliquet enim tortor. Nunc mattis enim ut tellus elementum sagittis vitae et leo. Quis vel eros donec ac odio tempor. 
+    Faucibus scelerisque eleifend donec pretium. <br><br>Adipiscing bibendum est ultricies integer quis auctor elit. Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed felis eget. Gravida dictum fusce ut placerat orci nulla. 
+    Consequat mauris nunc congue nisi vitae suscipit tellus mauris. <br><br></p><p><strong>List</strong></p><ul><li><p>Integer enim neque volutpat ac tincidunt vitae semper quis. Sit amet consectetur adipiscing elit pellentesque.</p></li><li><p>Urna cursus eget nunc scelerisque viverra. 
+    Cursus metus aliquam eleifend mi in nulla posuere. Lobortis elementum nibh tellus molestie nunc non blandit massa.</p></li><li><p>Sodales ut eu sem integer vitae justo eget magna. Scelerisque felis imperdiet proin fermentum leo vel orci. Nunc id cursus metus aliquam eleifend.</p></li></ul>
+    </div>
+    </div>
+    </div>
+    </section>`,
+    id: null,
+    title: 'Text',
+    icon: `
+    <span class="material-symbols-outlined">
+    text_fields
+    </span>
+    `,
+  },
+  {
+    html_code: `<section><div class="relative py-4"><div class="mx-auto max-w-7xl lg:px-4 px-2"><div class="break-words"><h2>Consequat mauris nunc congue</h2></div></div></div></section>`,
+    id: null,
+    title: 'Header H2',
+    icon: `
+    <span class="material-symbols-outlined">
+    format_h2
+    </span>
+    `,
+  },
+  {
+    html_code: `<section><div class="relative py-4"><div class="mx-auto max-w-7xl lg:px-4 px-2"><div class="break-words"><h3>Consequat mauris nunc congue</h3></div></div></div></section>`,
+    id: null,
+    title: 'Header H3',
+    icon: `
+    <span class="material-symbols-outlined">
+    format_h3
+    </span>
+    `,
+  },
+  {
+    html_code: `
+    <section>
+    <div class="py-4">
+    <div class="mx-auto max-w-7xl lg:px-4 px-2">
+    <div  id="youtube-video" class="w-full aspect-video bg-slate-100 border border-slate-200 rounded-xl lg:p-8 md:p-6 p-4">
+
+    <iframe
+    frameborder="0" 
+    allowfullscreen
+    class="w-full aspect-video bg-gray-600 border border-slate-800 rounded-xl"
+    src="" 
+    allow="accelerometer; autoplay; clipboard-write;" allowfullscreen>
+    </iframe>
+    </div>
+    </div>
+    </div>
+    </section>`,
+    id: null,
+    title: 'YouTube Video',
+    icon: `
+    <span class="material-symbols-outlined">
+    play_circle
+    </span>
+    `,
+  },
+  {
+    html_code: `<section><div class="relative py-8"><div class="absolute inset-0 flex items-center" aria-hidden="true"><div class="w-full border-4 border-gray-800 leading-none"></div></div><div class="relative flex justify-start"></div></div></section>`,
+    id: null,
+    title: 'Break Divider',
+    icon: `
+    <span class="material-symbols-outlined">
+    horizontal_rule
+    </span>
+    `,
+  },
+  {
+    html_code: `<section>\n<div class=\"w-full md:pt-2 md:pb-2 pt-4 pb-4 lg:px-4 px-2\">\n<div class=\"mx-auto max-w-7xl\">\n<div id=\"linktree\"\nclass=\"border-2 border-gray-600 flex items-centre justify-start rounded-md font-medium text-black\">\n<p>\n<a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://www.google.com\">Link to landing page</a>\n</p>\n</div>\n</div>\n</div>\n</section>`,
+    id: null,
+    title: 'Link',
+    icon: `
+        <span class="material-symbols-outlined">
+        horizontal_rule
+        </span>
+        `,
+  },
+]
+
+export default componentHelpers

package/src/Components/Modals/PageBuilderModal.vue

@@ -1,233 +0,0 @@
-<script setup>
-import Modal from '@/Components/Modals/Modal.vue'
-import DynamicModal from '@/Components/Modals/DynamicModal.vue'
-import PageBuilder from '@/composables/PageBuilder.ts'
-import { delay } from '@/composables/delay'
-
-import {
-  Dialog,
-  DialogOverlay,
-  DialogTitle,
-  TransitionChild,
-  TransitionRoot,
-} from '@headlessui/vue'
-import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
-import { computed, onMounted, ref } from 'vue'
-import { usePageBuilderStateStore } from '@/stores/page-builder-state'
-import { useUserStore } from '@/stores/user'
-import { useMediaLibraryStore } from '@/stores/media-library'
-
-const mediaLibraryStore = useMediaLibraryStore()
-const userStore = useUserStore()
-const pageBuilderStateStore = usePageBuilderStateStore()
-
-defineProps({
-  show: {
-    type: Boolean,
-    default: false,
-    required: true,
-  },
-  updateOrCreate: {
-    required: true,
-  },
-})
-
-const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
-
-const hideDraftButton = ref(true)
-
-const showModalConfirmClosePageBuilder = 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 firstModalButtonFunction = ref(null)
-const secondModalButtonFunction = ref(null)
-const thirdModalButtonFunction = ref(null)
-
-const emit = defineEmits([
-  'pageBuilderPrimaryHandler',
-  'pageBuilderSecondaryHandler',
-  'handleDraftForUpdate',
-])
-
-const firstButton = function () {
-  showModalConfirmClosePageBuilder.value = true
-  typeModal.value = 'danger'
-  gridColumnModal.value = 3
-  titleModal.value = 'Close page builder without save?'
-  descriptionModal.value =
-    'Are you sure you want to close the page builder without saving? Any changes will be lost.'
-  firstButtonModal.value = 'Close'
-  secondButtonModal.value = null
-  thirdButtonModal.value = 'Exit Page Builder'
-
-  // handle click
-  firstModalButtonFunction.value = function () {
-    showModalConfirmClosePageBuilder.value = false
-  }
-  // handle click
-  secondModalButtonFunction.value = function () {
-    secondButton()
-  }
-
-  // handle click
-  thirdModalButtonFunction.value = async function () {
-    showModalConfirmClosePageBuilder.value = false
-    emit('pageBuilderPrimaryHandler')
-
-    pageBuilder.removeHoveredAndSelected()
-    userStore.setIsLoading(true)
-    await delay()
-    userStore.setIsLoading(false)
-  }
-  //
-  // end modal
-}
-
-const handleEscapeKey = function () {
-  firstButton()
-}
-
-// first button function
-const secondButton = function () {
-  emit('pageBuilderSecondaryHandler')
-  pageBuilder.removeHoveredAndSelected()
-}
-
-//
-//
-const getLocalStorageItemNameUpdate = computed(() => {
-  return pageBuilderStateStore.getLocalStorageItemNameUpdate
-})
-//
-const handleDraftForUpdate = function () {
-  hideDraftButton.value = false
-  emit('handleDraftForUpdate')
-}
-
-onMounted(() => {
-  const item = localStorage.getItem(getLocalStorageItemNameUpdate.value)
-  if (item) {
-    const parsedValue = JSON.parse(item)
-
-    if (Array.isArray(parsedValue) && parsedValue.length === 0) {
-      hideDraftButton.value = false
-    }
-  }
-  if (!item) {
-    hideDraftButton.value = false
-  }
-})
-</script>
-
-<template>
-  <teleport to="body">
-    <TransitionRoot :show="show" as="template">
-      <Dialog
-        @close="firstButton"
-        @keydown.escape.prevent="handleEscapeKey"
-        as="div"
-        class="fixed z-30 inset-0 overflow-y-auto focus:outline-none"
-        tabindex="0"
-      >
-        <div class="flex items-end justify-center pb-20 text-center sm:block sm:p-0 bg-white">
-          <TransitionChild
-            as="template"
-            enter="ease-out duration-100"
-            enter-from="opacity-0"
-            enter-to="opacity-100"
-            leave="ease-in duration-200"
-            leave-from="opacity-100"
-            leave-to="opacity-0"
-          >
-            <DialogOverlay class="fixed inset-0 bg-white 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 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enter-to="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leave-from="opacity-100 translate-y-0 sm:scale-100"
-            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          >
-            <div
-              class="bg-red-100 inline-block align-bottom text-left transform transition-all sm:align-middle w-full overflow-hidden h-[100vh] top-0 left-0 right-0 absolute"
-            >
-              <DynamicModal
-                :show="showModalConfirmClosePageBuilder"
-                :type="typeModal"
-                :gridColumnAmount="gridColumnModal"
-                :title="titleModal"
-                :description="descriptionModal"
-                :firstButtonText="firstButtonModal"
-                :secondButtonText="secondButtonModal"
-                :thirdButtonText="thirdButtonModal"
-                @firstModalButtonFunction="firstModalButtonFunction"
-                @secondModalButtonFunction="secondModalButtonFunction"
-                @thirdModalButtonFunction="thirdModalButtonFunction"
-              >
-                <header></header>
-                <main></main>
-              </DynamicModal>
-              <div
-                @click="pageBuilderStateStore.setComponent(null)"
-                class="px-4 px-4 lg:h-[10vh] h-[16vh] flex items-center justify-between border-b border-gray-200 bg-white"
-              >
-                <div class="flex items-center justify-start divide-x divide-gray-200">
-                  <button type="button" @click="firstButton" class="border-r border-gray-200 pr-6">
-                    <img class="h-6" src="/logo/logo.svg" alt="Logo" />
-                  </button>
-                  <button
-                    class="myPrimaryButton lg:text-sm text-[10px] lg:py-2 py-2 min-h-2 ml-4"
-                    @click="secondButton"
-                    type="button"
-                  >
-                    <span class="material-symbols-outlined text-[18px]"> save </span>
-                    Save & Close
-                  </button>
-                  <button
-                    v-if="updateOrCreate === 'update' && hideDraftButton"
-                    class="mySecondaryButton lg:text-sm text-[10px] lg:py-2 py-2 min-h-2 ml-2"
-                    @click="handleDraftForUpdate"
-                    type="button"
-                  >
-                    <span class="material-symbols-outlined text-[18px]">
-                      settings_backup_restore
-                    </span>
-                    Use Draft
-                  </button>
-                </div>
-                <button
-                  type="button"
-                  @click="firstButton"
-                  class="flex items-center justify-center gap-1 cursor-pointer"
-                >
-                  <span class="myPrimaryParagraph font-medium"> Close Builder </span>
-                  <div
-                    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"> close </span>
-                  </div>
-                </button>
-              </div>
-              <slot></slot>
-            </div>
-          </TransitionChild>
-        </div>
-      </Dialog>
-    </TransitionRoot>
-  </teleport>
-</template>

package/src/utils/builder/html-elements/componentHelpers.ts

@@ -1,101 +0,0 @@
-interface ComponentHelper {
-  html_code: string
-  id: string | null
-  title: string
-  icon: string
-}
-
-const componentHelpers: ComponentHelper[] = [
-  {
-    html_code: `
-        <section>
-        <div class="relative py-4">
-        <div class="mx-auto max-w-7xl lg:px-4 px-2">
-        <div>
-        <p><strong>Text</strong></p><p>Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Erat nam at lectus urna duis convallis convallis. Congue mauris rhoncus aenean vel elit scelerisque. 
-        Turpis tincidunt id aliquet risus feugiat in ante. Tincidunt dui ut ornare lectus sit. Ipsum dolor sit amet consectetur. Viverra ipsum nunc aliquet bibendum enim facilisis gravida neque convallis.<br><br>Dignissim sodales ut eu sem integer vitae justo eget magna. 
-        Ac turpis egestas maecenas pharetra convallis. Mauris sit amet massa vitae. Ut tellus elementum sagittis vitae et. Sed risus ultricies tristique nulla aliquet enim tortor. Nunc mattis enim ut tellus elementum sagittis vitae et leo. Quis vel eros donec ac odio tempor. 
-        Faucibus scelerisque eleifend donec pretium. <br><br>Adipiscing bibendum est ultricies integer quis auctor elit. Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed felis eget. Gravida dictum fusce ut placerat orci nulla. 
-        Consequat mauris nunc congue nisi vitae suscipit tellus mauris. <br><br></p><p><strong>List</strong></p><ul><li><p>Integer enim neque volutpat ac tincidunt vitae semper quis. Sit amet consectetur adipiscing elit pellentesque.</p></li><li><p>Urna cursus eget nunc scelerisque viverra. 
-        Cursus metus aliquam eleifend mi in nulla posuere. Lobortis elementum nibh tellus molestie nunc non blandit massa.</p></li><li><p>Sodales ut eu sem integer vitae justo eget magna. Scelerisque felis imperdiet proin fermentum leo vel orci. Nunc id cursus metus aliquam eleifend.</p></li></ul>
-        </div>
-        </div>
-        </div>
-        </section>`,
-    id: null,
-    title: 'Text',
-    icon: `
-        <span class="material-symbols-outlined">
-        text_fields
-        </span>
-        `,
-  },
-  {
-    html_code: `<section><div class="relative py-4"><div class="mx-auto max-w-7xl lg:px-4 px-2"><div class="break-words"><h2>Consequat mauris nunc congue</h2></div></div></div></section>`,
-    id: null,
-    title: 'Header H2',
-    icon: `
-        <span class="material-symbols-outlined">
-        format_h2
-        </span>
-        `,
-  },
-  {
-    html_code: `<section><div class="relative py-4"><div class="mx-auto max-w-7xl lg:px-4 px-2"><div class="break-words"><h3>Consequat mauris nunc congue</h3></div></div></div></section>`,
-    id: null,
-    title: 'Header H3',
-    icon: `
-        <span class="material-symbols-outlined">
-        format_h3
-        </span>
-        `,
-  },
-  {
-    html_code: `
-        <section>
-        <div class="py-4">
-        <div class="mx-auto max-w-7xl lg:px-4 px-2">
-        <div id="youtube-video" class="w-full aspect-video bg-slate-100 border border-slate-200 rounded-xl lg:p-8 md:p-6 p-4">
-     
-        <iframe
-        frameborder="0" 
-        allowfullscreen
-        class="w-full aspect-video bg-gray-600 border border-slate-800 rounded-xl"
-        src="" 
-        allow="accelerometer; autoplay; clipboard-write;" allowfullscreen>
-        </iframe>
-        </div>
-        </div>
-        </div>
-        </section>`,
-    id: null,
-    title: 'YouTube Video',
-    icon: `
-        <span class="material-symbols-outlined">
-        play_circle
-        </span>
-        `,
-  },
-  {
-    html_code: `<section><div class="relative py-8"><div class="absolute inset-0 flex items-center" aria-hidden="true"><div class="w-full border-4 border-gray-800 leading-none"></div></div><div class="relative flex justify-start"></div></div></section>`,
-    id: null,
-    title: 'Break Divider',
-    icon: `
-        <span class="material-symbols-outlined">
-        horizontal_rule
-        </span>
-        `,
-  },
-  {
-    html_code: `<section>\n<div class=\"w-full md:pt-2 md:pb-2 pt-4 pb-4 lg:px-4 px-2\">\n<div class=\"mx-auto max-w-7xl\">\n<div id=\"linktree\"\nclass=\"border-2 border-gray-600 flex items-centre justify-start rounded-md font-medium text-black\">\n<p>\n<a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://www.google.com\">Link to landing page</a>\n</p>\n</div>\n</div>\n</div>\n</section>`,
-    id: null,
-    title: 'Link',
-    icon: `
-        <span class="material-symbols-outlined">
-        horizontal_rule
-        </span>
-        `,
-  },
-]
-
-export default componentHelpers