@myissue/vue-website-page-builder 3.2.32 → 3.2.35

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

@@ -1,229 +0,0 @@
-<script setup>
-import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
-import PageBuilderClass from '../../../composables/PageBuilderClass'
-import { ref, computed } from 'vue'
-import PageBuilderPreviewModal from '../../Modals/PageBuilderPreviewModal.vue'
-import Preview from '../../../PageBuilder/Preview.vue'
-import SlideOverRight from '../Slidebars/SlideOverRight.vue'
-import PageBuilderSettings from '../Settings/PageBuilderSettings.vue'
-import DynamicModalBuilder from '../../Modals/DynamicModalBuilder.vue'
-import { sharedPageBuilderStore } from '../../../stores/shared-store'
-
-// Use shared store instance
-const pageBuilderStateStore = sharedPageBuilderStore
-
-const getConfigPageBuilder = computed(() => {
-  return pageBuilderStateStore.getConfigPageBuilder
-})
-
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
-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 firstModalButtonFunctionDynamicModalBuilder = ref(null)
-const secondModalButtonFunctionDynamicModalBuilder = ref(null)
-const thirdModalButtonFunctionDynamicModalBuilder = 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
-  firstModalButtonFunctionDynamicModalBuilder.value = function () {
-    showModalDeleteAllComponents.value = false
-  }
-  //
-  // handle click
-  thirdModalButtonFunctionDynamicModalBuilder.value = function () {
-    pageBuilderClass.deleteAllComponents()
-    pageBuilderClass.clearHtmlSelection()
-    if (
-      getConfigPageBuilder.value.updateOrCreate &&
-      typeof getConfigPageBuilder.value.updateOrCreate.formType === 'string'
-    ) {
-      if (getConfigPageBuilder.value.updateOrCreate.formType === 'create') {
-        pageBuilderClass.removeItemComponentsLocalStorageCreate()
-      }
-      if (getConfigPageBuilder.value.updateOrCreate.formType === 'update') {
-        pageBuilderClass.removeItemComponentsLocalStorageUpdate()
-      }
-    }
-
-    // if(getConfigPageBuilder.updateOrCreate && getConfigPageBuilder.updateOrCreate){}
-
-    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>
-  <div>
-    <SlideOverRight
-      :open="showSettingsSlideOverRight"
-      :title="titleSettingsSlideOverRight"
-      @slideOverButton="settingsSlideOverButton"
-    >
-      <PageBuilderSettings> </PageBuilderSettings>
-    </SlideOverRight>
-    <DynamicModalBuilder
-      :showDynamicModalBuilder="showModalDeleteAllComponents"
-      :type="typeModal"
-      :gridColumnAmount="gridColumnModal"
-      :title="titleModal"
-      :description="descriptionModal"
-      :firstButtonText="firstButtonModal"
-      :secondButtonText="secondButtonModal"
-      :thirdButtonText="thirdButtonModal"
-      @firstModalButtonFunctionDynamicModalBuilder="firstModalButtonFunctionDynamicModalBuilder"
-      @secondModalButtonFunctionDynamicModalBuilder="secondModalButtonFunctionDynamicModalBuilder"
-      @thirdModalButtonFunctionDynamicModalBuilder="thirdModalButtonFunctionDynamicModalBuilder"
-    >
-      <header></header>
-      <main></main>
-    </DynamicModalBuilder>
-    <Menu as="div" class="myPrimaryParagraph relative lg:inline-block hidden text-left mr-4">
-      <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">
-            <template
-              v-if="
-                getConfigPageBuilder &&
-                getConfigPageBuilder.userForPageBuilder &&
-                getConfigPageBuilder.userForPageBuilder.name
-              "
-            >
-              <MenuItem v-slot="{ active }">
-                <div
-                  class="cursor-defualt"
-                  :class="[
-                    active ? 'bg-myPrimaryLightGrayColor text-gray-900' : 'text-gray-700',
-                    'block px-4 py-2 break-all',
-                  ]"
-                >
-                  <div class="flex items-center justify-left gap-2 text-sm">
-                    <div>
-                      {{ getConfigPageBuilder.userForPageBuilder.name }}
-                    </div>
-                  </div>
-                </div>
-              </MenuItem>
-            </template>
-
-            <p>
-              <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">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">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">
-                    <span class="group-hover:text-white"> Delete Layout </span>
-                  </div>
-                </div>
-              </MenuItem>
-            </p>
-          </div>
-        </MenuItems>
-      </transition>
-    </Menu>
-    <PageBuilderPreviewModal
-      :show="openPageBuilderPreviewModal"
-      @firstPageBuilderPreviewModalButton="firstPageBuilderPreviewModalButton"
-    >
-      <Preview></Preview>
-    </PageBuilderPreviewModal>
-  </div>
-</template>

package/src/Components/PageBuilder/Slidebars/SlideOverRight.vue

@@ -1,91 +0,0 @@
-<script setup>
-import {
-  Dialog,
-  DialogPanel,
-  DialogTitle,
-  TransitionChild,
-  TransitionRoot,
-} from '@headlessui/vue';
-
-// props
-const props = defineProps({
-  open: {
-    required: true,
-  },
-  title: {
-    required: true,
-  },
-});
-
-// emit
-const emit = defineEmits(['slideOverButton']);
-
-// button
-const slideOverButton = function () {
-  emit('slideOverButton');
-};
-</script>
-
-<template>
-  <teleport to="body">
-    <TransitionRoot
-      as="template"
-      :show="open"
-    >
-      <Dialog
-        as="div"
-        class="relative z-40"
-        @click="$emit('slideOverButton')"
-      >
-        <div class="fixed inset-0" />
-
-        <div class="fixed inset-0 overflow-hidden">
-          <div class="absolute inset-0 overflow-hidden">
-            <div
-              class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 justify-end"
-            >
-              <TransitionChild
-                as="template"
-                enter="transform transition ease-in-out duration-200 sm:duration-200"
-                enter-from="translate-x-full"
-                enter-to="translate-x-0"
-                leave="transform transition ease-in-out duration-200 sm:duration-200"
-                leave-from="translate-x-0"
-                leave-to="translate-x-full"
-              >
-                <DialogPanel class="pointer-events-auto w-96 max-w-md">
-                  <div
-                    class="flex h-full flex-col overflow-y-scroll bg-white pt-8 pb-6 shadow-xl"
-                  >
-                    <div class="pl-4 pr-2">
-                      <div class="flex items-center justify-between">
-                        <DialogTitle class="myTertiaryHeader my-0">
-                          {{ title }}
-                        </DialogTitle>
-                        <div class="ml-3 flex h-7 items-center">
-                          <button
-                            @click="$emit('slideOverButton')"
-                            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>
-                          </button>
-                        </div>
-                      </div>
-                      <div class="md:mt-6 mt-4">
-                        <!-- Replace with your content -->
-                        <slot></slot>
-                        <!-- /End replace -->
-                      </div>
-                    </div>
-                  </div>
-                </DialogPanel>
-              </TransitionChild>
-            </div>
-          </div>
-        </div>
-      </Dialog>
-    </TransitionRoot>
-  </teleport>
-</template>

package/src/Components/PageBuilder/Slidebars/SlideOverRightParent.vue

@@ -1,91 +0,0 @@
-<script setup>
-import {
-  Dialog,
-  DialogPanel,
-  DialogTitle,
-  TransitionChild,
-  TransitionRoot,
-} from '@headlessui/vue';
-
-// props
-const props = defineProps({
-  open: {
-    required: true,
-  },
-  title: {
-    required: true,
-  },
-});
-
-// emit
-const emit = defineEmits(['slideOverButton']);
-
-// button
-const slideOverButton = function () {
-  emit('slideOverButton');
-};
-</script>
-
-<template>
-  <teleport to="body">
-    <TransitionRoot
-      as="template"
-      :show="open"
-    >
-      <Dialog
-        as="div"
-        class="relative z-40"
-        @click="$emit('slideOverButton')"
-      >
-        <div class="fixed inset-0" />
-
-        <div class="fixed inset-0 overflow-hidden">
-          <div class="absolute inset-0 overflow-hidden">
-            <div
-              class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 justify-end"
-            >
-              <TransitionChild
-                as="template"
-                enter="transform transition ease-in-out duration-200 sm:duration-200"
-                enter-from="translate-x-full"
-                enter-to="translate-x-0"
-                leave="transform transition ease-in-out duration-200 sm:duration-200"
-                leave-from="translate-x-0"
-                leave-to="translate-x-full"
-              >
-                <DialogPanel class="pointer-events-auto w-96 max-w-md">
-                  <div
-                    class="flex h-full flex-col overflow-y-scroll bg-white pt-8 pb-6 shadow-xl"
-                  >
-                    <div class="pl-4 pr-2">
-                      <div class="flex items-center justify-between">
-                        <DialogTitle class="myTertiaryHeader my-0">
-                          {{ title }}
-                        </DialogTitle>
-                        <div class="ml-3 flex h-7 items-center">
-                          <button
-                            @click="$emit('slideOverButton')"
-                            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>
-                          </button>
-                        </div>
-                      </div>
-                      <div class="md:mt-6 mt-4">
-                        <!-- Replace with your content -->
-                        <slot></slot>
-                        <!-- /End replace -->
-                      </div>
-                    </div>
-                  </div>
-                </DialogPanel>
-              </TransitionChild>
-            </div>
-          </div>
-        </div>
-      </Dialog>
-    </TransitionRoot>
-  </teleport>
-</template>