@myissue/vue-website-page-builder 3.0.1

package/src/Components/Modals/PageBuilderModal.vue

@@ -0,0 +1,233 @@
+<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/Components/Modals/PageBuilderPreviewModal.vue

@@ -0,0 +1,123 @@
+<script setup>
+import Modal from '@/Components/Modals/Modal.vue';
+import { delay } from '@/composables/delay';
+
+import {
+  Dialog,
+  DialogOverlay,
+  DialogTitle,
+  TransitionChild,
+  TransitionRoot,
+} from '@headlessui/vue';
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
+import { useUserStore } from '@/stores/user';
+
+const userStore = useUserStore();
+
+defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['firstPageBuilderPreviewModalButton']);
+
+// first button function
+const firstButton = async function () {
+  emit('firstPageBuilderPreviewModalButton');
+
+  userStore.setIsLoading(true);
+  await delay();
+  userStore.setIsLoading(false);
+};
+
+const handleEscapeKey = function () {
+  firstButton();
+};
+</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-100"
+            leave-from="opacity-100"
+            leave-to="opacity-100"
+          >
+            <DialogOverlay
+              class="fixed inset-0 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-100"
+            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"
+            >
+              <div
+                class="px-4 px-4 lg:h-[10vh] h-[16vh] flex items-center justify-between border-b border-gray-200 bg-white"
+              >
+                <button
+                  type="button"
+                  @click="firstButton"
+                >
+                  <img
+                    class="h-6"
+                    src="/logo/logo.svg"
+                    alt="Logo"
+                  />
+                </button>
+                <div
+                  @click="firstButton"
+                  class="flex items-center justify-center gap-1 cursor-pointer"
+                >
+                  <span class="myPrimaryParagraph font-medium">
+                    Close Preview
+                  </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>
+                </div>
+              </div>
+              <slot></slot>
+            </div>
+          </TransitionChild>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+  </teleport>
+</template>

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

@@ -0,0 +1,202 @@
+<script setup>
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import PageBuilder from '@/composables/PageBuilder.ts'
+import { ref, computed } from 'vue'
+import PageBuilderPreviewModal from '@/Components/Modals/PageBuilderPreviewModal.vue'
+import Preview from '@/PageBuilder/Preview.vue'
+import SlideOverRight from '@/Components/PageBuilder/Slidebars/SlideOverRight.vue'
+import PageBuilderSettings from '@/Components/PageBuilder/Settings/PageBuilderSettings.vue'
+import DynamicModal from '@/Components/Modals/DynamicModal.vue'
+import { usePageBuilderStateStore } from '@/stores/page-builder-state'
+import { useMediaLibraryStore } from '@/stores/media-library'
+
+const mediaLibraryStore = useMediaLibraryStore()
+const pageBuilderStateStore = usePageBuilderStateStore()
+const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
+const emit = defineEmits(['previewCurrentDesign'])
+
+const showModalDeleteAllComponents = 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 showSettingsSlideOverRight = ref(false)
+const titleSettingsSlideOverRight = ref(null)
+const openPageBuilderPreviewModal = ref(false)
+const firstPageBuilderPreviewModalButton = ref(null)
+
+const handlePageBuilderPreview = function () {
+  emit('previewCurrentDesign')
+
+  openPageBuilderPreviewModal.value = true
+  // handle click
+  firstPageBuilderPreviewModalButton.value = function () {
+    openPageBuilderPreviewModal.value = false
+  }
+  // end modal
+}
+
+const deleteAllComponents = function () {
+  showModalDeleteAllComponents.value = true
+  typeModal.value = 'delete'
+  gridColumnModal.value = 2
+  titleModal.value = 'Remove all Components'
+  descriptionModal.value = 'Are you sure you want to remove all Components?'
+  firstButtonModal.value = 'Close'
+  secondButtonModal.value = null
+  thirdButtonModal.value = 'Delete'
+
+  // handle click
+  firstModalButtonFunction.value = function () {
+    showModalDeleteAllComponents.value = false
+  }
+  //
+  // handle click
+  thirdModalButtonFunction.value = function () {
+    pageBuilder.deleteAllComponents()
+    pageBuilderStateStore.setComponents(null)
+    showModalDeleteAllComponents.value = false
+  }
+  // end modal
+}
+
+// handle slideover window
+const handleSettingsSlideOver = function () {
+  pageBuilderStateStore.setComponent(null)
+
+  titleSettingsSlideOverRight.value = 'Settings'
+  showSettingsSlideOverRight.value = true
+}
+// handle slideover window
+const settingsSlideOverButton = function () {
+  pageBuilderStateStore.setComponent(null)
+
+  showSettingsSlideOverRight.value = false
+}
+</script>
+
+<template>
+  <SlideOverRight
+    :open="showSettingsSlideOverRight"
+    :title="titleSettingsSlideOverRight"
+    @slideOverButton="settingsSlideOverButton"
+  >
+    <PageBuilderSettings> </PageBuilderSettings>
+  </SlideOverRight>
+  <DynamicModal
+    :show="showModalDeleteAllComponents"
+    :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>
+  <Menu as="div" class="myPrimaryParagraph relative lg:inline-block hidden text-left">
+    <div>
+      <MenuButton
+        class="inline-flex items-center gap-2 justify-center w-full rounded-md border border-gray-300 shadow-sm pl-4 pr-6 py-2 bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-emerald-600"
+      >
+        <span class="material-symbols-outlined text-[16px]"> keyboard_command_key </span>
+        <span class="text-sm"> Options </span>
+      </MenuButton>
+    </div>
+
+    <transition
+      enter-active-class="transition ease-out duration-100"
+      enter-from-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-from-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <MenuItems
+        class="z-50 origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none"
+      >
+        <div class="py-1">
+          <MenuItem v-slot="{ active }">
+            <div
+              @click="handlePageBuilderPreview"
+              class="cursor-pointer"
+              :class="[
+                active ? 'bg-myPrimaryLightGrayColor text-gray-900' : 'text-gray-700',
+                'block px-4 py-2',
+              ]"
+            >
+              <div class="flex items-center justify-left gap-2 text-sm">
+                <div
+                  class="h-8 w-8 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 text-[16px]"> visibility </span>
+                </div>
+                Preview
+              </div>
+            </div>
+          </MenuItem>
+
+          <MenuItem v-slot="{ active }">
+            <div
+              @click="handleSettingsSlideOver"
+              class="cursor-pointer"
+              :class="[
+                active ? 'bg-myPrimaryLightGrayColor text-gray-900' : 'text-gray-700',
+                'block px-4 py-2',
+              ]"
+            >
+              <div class="flex items-center justify-left gap-2 text-sm">
+                <div
+                  class="h-8 w-8 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 text-[16px]"> settings </span>
+                </div>
+                Settings
+              </div>
+            </div>
+          </MenuItem>
+          <MenuItem v-slot="{ active }">
+            <div
+              @click="deleteAllComponents"
+              class="cursor-pointer"
+              :class="[
+                active ? 'bg-myPrimaryLightGrayColor text-gray-900' : 'text-gray-700',
+                'block px-4 py-2',
+              ]"
+            >
+              <div class="flex items-center justify-left gap-2 text-sm">
+                <div
+                  class="h-8 w-8 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryErrorColor hover:text-white text-myPrimaryErrorColor"
+                >
+                  <span class="myMediumIcon material-symbols-outlined text-[16px]"> delete </span>
+                </div>
+                <span class="group-hover:text-white"> Clear page </span>
+              </div>
+            </div>
+          </MenuItem>
+        </div>
+      </MenuItems>
+    </transition>
+  </Menu>
+  <PageBuilderPreviewModal
+    :show="openPageBuilderPreviewModal"
+    @firstPageBuilderPreviewModalButton="firstPageBuilderPreviewModalButton"
+  >
+    <Preview></Preview>
+  </PageBuilderPreviewModal>
+</template>

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

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <button class="myPrimaryButton">
+      <p>Save</p>
+    </button>
+  </div>
+</template>

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

@@ -0,0 +1,91 @@
+<script setup>
+import tailwindColors from '@/utils/builder/tailwaind-colors'
+import PageBuilder from '@/composables/PageBuilder.ts'
+import { computed, ref, watch } from 'vue'
+import {
+  Listbox,
+  ListboxButton,
+  ListboxLabel,
+  ListboxOption,
+  ListboxOptions,
+} from '@headlessui/vue'
+import { usePageBuilderStateStore } from '@/stores/page-builder-state'
+import { useMediaLibraryStore } from '@/stores/media-library'
+
+const mediaLibraryStore = useMediaLibraryStore()
+const pageBuilderStateStore = usePageBuilderStateStore()
+const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
+const backgroundColor = ref(null)
+const getBackgroundColor = computed(() => {
+  return pageBuilderStateStore.getBackgroundColor
+})
+
+watch(
+  getBackgroundColor,
+  (newValue) => {
+    backgroundColor.value = newValue
+    pageBuilder.handlePageBuilderMethods()
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <Listbox as="div" v-model="backgroundColor">
+    <div class="relative">
+      <ListboxButton
+        class="w-max flex items-center px-2 text-[12.5px] gap-2 text-nowrap pl-2 pr-3 h-10 cursor-pointer rounded-full border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
+      >
+        <div v-if="getBackgroundColor === 'none'" class="flex gap-2 items-center">
+          <span class="material-symbols-outlined"> colors </span>
+          <span class="block truncate text-[12.5px]">Background color </span>
+        </div>
+        <div v-if="backgroundColor !== 'none'" class="flex items-center gap-2">
+          <div
+            class="aspect-square w-6 h-6 border border-gray-800 rounded-sm"
+            :class="`bg-${backgroundColor?.replace('bg-', '')}`"
+          ></div>
+          <span class="block truncate">{{ backgroundColor }}</span>
+        </div>
+      </ListboxButton>
+
+      <transition
+        leave-active-class="transition ease-in duration-100"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <ListboxOptions
+          class="absolute min-w-[12rem] z-40 mt-1 max-h-56 w-full overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+        >
+          <ListboxOption
+            as="template"
+            v-for="color in tailwindColors.backgroundColorVariables"
+            @click="pageBuilder.handleBackgroundColor(backgroundColor)"
+            :key="color"
+            :value="color"
+            v-slot="{ active, backgroundColor }"
+          >
+            <li
+              :class="[
+                active ? 'bg-myPrimaryLinkColor text-white' : 'text-myPrimaryDarkGrayColor',
+                'relative cursor-default select-none py-2 pl-3 pr-9',
+              ]"
+            >
+              <div v-if="color === 'none'" class="flex items-center">
+                <span class="material-symbols-outlined"> ev_shadow </span>
+                <span class="ml-3">Transparent</span>
+              </div>
+              <div v-if="color !== 'none'" class="flex items-center">
+                <div
+                  class="aspect-square w-6 h-6 border border-gray-100 rounded-sm"
+                  :class="`bg-${color.replace('bg-', '')}`"
+                ></div>
+                <span class="ml-3">{{ color }}</span>
+              </div>
+            </li>
+          </ListboxOption>
+        </ListboxOptions>
+      </transition>
+    </div>
+  </Listbox>
+</template>