@myissue/vue-website-page-builder 3.0.1

package/src/Components/PageBuilder/Settings/PageBuilderSettings.vue

@@ -0,0 +1,101 @@
+<script setup>
+import SlideOverRightParent from '@/Components/PageBuilder/Slidebars/SlideOverRightParent.vue';
+import AdvancedPageBuilderSettings from '@/Components/PageBuilder/Settings/AdvancedPageBuilderSettings.vue';
+import { ref, computed } from 'vue';
+import fullHTMLContent from '@/utils/builder/html-doc-declaration-with-components';
+import { usePageBuilderStateStore } from '@/stores/page-builder-state';
+
+const pageBuilderStateStore = usePageBuilderStateStore();
+
+const showAdvancedSettingsSlideOverRight = ref(false);
+const titleSettingsSlideOverRight = ref('');
+const downloadedComponents = ref(null);
+
+// handle slideover window
+const handleAdvancedSettingsSlideOver = function () {
+  titleSettingsSlideOverRight.value = 'Advanced Settings';
+  showAdvancedSettingsSlideOverRight.value = true;
+};
+
+// handle slideover window
+const settingsAdvancedSlideOverButton = function () {
+  showAdvancedSettingsSlideOverRight.value = false;
+};
+
+const getComponents = computed(() => {
+  return pageBuilderStateStore.getComponents;
+});
+
+// generate HTML
+const generateHTML = function (filename, HTML) {
+  const element = document.createElement('a');
+  element.setAttribute(
+    'href',
+    'data:text/html;charset=utf-8,' + encodeURIComponent(fullHTMLContent(HTML))
+  );
+  element.setAttribute('download', filename);
+
+  element.style.display = 'none';
+  document.body.appendChild(element);
+
+  element.click();
+
+  document.body.removeChild(element);
+};
+
+// handle download HTML
+const handleDownloadHTML = function () {
+  downloadedComponents.value = getComponents.value.map((component) => {
+    return component.html_code;
+  });
+
+  generateHTML('downloaded_html.html', downloadedComponents.value.join(''));
+};
+</script>
+
+<template>
+  <SlideOverRightParent
+    :open="showAdvancedSettingsSlideOverRight"
+    :title="titleSettingsSlideOverRight"
+    @slideOverButton="settingsAdvancedSlideOverButton"
+  >
+    <AdvancedPageBuilderSettings></AdvancedPageBuilderSettings>
+  </SlideOverRightParent>
+  <!-- Advanced Settings - start -->
+  <div class="mt-4 mb-4 py-8 border-b border-myPrimbryLightGrayColor">
+    <div class="flex items-left flex-col gap-1">
+      <h3 class="myQuaternaryHeader">Advanced Settings</h3>
+      <p class="myPrimaryParagraph text-xs">
+        Manage advanced settings here. Like an overview of Selected Element,
+        Component, and Components in real-time.
+      </p>
+    </div>
+    <div class="mt-4">
+      <button
+        @click="handleAdvancedSettingsSlideOver"
+        type="button"
+        class="myPrimaryButton text-xs"
+      >
+        Advanced Settings
+      </button>
+    </div>
+  </div>
+  <!-- Advanced Settings - end -->
+  <!-- Download Layout HTML - start -->
+  <div class="mt-4 mb-4 py-8 border-b border-myPrimbryLightGrayColor">
+    <div class="flex items-left flex-col gap-1">
+      <h3 class="myQuaternaryHeader">Download Page as HTML</h3>
+      <p class="myPrimaryParagraph text-xs">Download current page layout.</p>
+    </div>
+    <div class="mt-4">
+      <button
+        @click="handleDownloadHTML"
+        type="button"
+        class="myPrimaryButton text-xs"
+      >
+        Download HTML file
+      </button>
+    </div>
+  </div>
+  <!-- Download Layout HTML - end -->
+</template>

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

@@ -0,0 +1,91 @@
+<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

@@ -0,0 +1,91 @@
+<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/Search/SearchComponents.vue

@@ -0,0 +1,259 @@
+<script setup>
+import Modal from '@/Components/Modals/Modal.vue'
+import { ref, computed, onMounted, onBeforeMount, nextTick } from 'vue'
+import componentHelpers from '@/utils/builder/html-elements/componentHelpers'
+import PageBuilder from '@/composables/PageBuilder.ts'
+import SmallUniversalSpinner from '@/Components/Loaders/SmallUniversalSpinner.vue'
+import { usePageBuilderStateStore } from '@/stores/page-builder-state'
+import { useMediaLibraryStore } from '@/stores/media-library'
+
+const mediaLibraryStore = useMediaLibraryStore()
+const pageBuilderStateStore = usePageBuilderStateStore()
+const props = defineProps({
+  firstButtonText: {
+    required: true,
+  },
+  title: {
+    required: true,
+  },
+  show: {
+    type: Boolean,
+    default: false,
+    required: true,
+  },
+})
+const emit = defineEmits(['firstModalButtonSearchComponentsFunction'])
+
+// first button function
+const firstButton = function () {
+  emit('firstModalButtonSearchComponentsFunction')
+}
+
+const search_query = ref('')
+const categorySelected = ref({ name: 'Components', id: null })
+
+const handlecategorySelected = function (category) {
+  categorySelected.value = category
+}
+const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
+
+const getFetchedComponents = computed(() => {
+  return pageBuilderStateStore.getFetchedComponents
+})
+
+const getComponentArrayAddMethod = computed(() => {
+  return pageBuilderStateStore.getComponentArrayAddMethod
+})
+
+const handleDropComponent = async function (componentObject) {
+  await nextTick()
+  const clonedComponent = pageBuilder.cloneCompObjForDOMInsertion({
+    html_code: componentObject.html_code,
+    id: componentObject.id,
+  })
+
+  await nextTick()
+
+  pageBuilderStateStore.setPushComponents({
+    component: clonedComponent,
+    componentArrayAddMethod: getComponentArrayAddMethod.value,
+  })
+
+  await nextTick()
+  pageBuilder.setEventListenersForElements()
+
+  // Close modal
+  firstButton()
+}
+
+const handleAddHelperComponent = async function (helperComponentObject) {
+  await nextTick()
+  const clonedComponent = pageBuilder.cloneCompObjForDOMInsertion({
+    html_code: helperComponentObject.html_code,
+    id: helperComponentObject.id,
+  })
+
+  await nextTick()
+
+  pageBuilderStateStore.setPushComponents({
+    component: clonedComponent,
+    componentArrayAddMethod: getComponentArrayAddMethod.value,
+  })
+
+  await nextTick()
+  pageBuilder.setEventListenersForElements()
+
+  // Close modal
+  firstButton()
+}
+
+const fetchComponents = function (page) {
+  //remember old search value while paginating
+  if (getFetchedComponents.value?.fetchedData?.oldInput?.search_query) {
+    search_query.value = getFetchedComponents.value?.fetchedData?.oldInput?.search_query
+  }
+  //
+  pageBuilderStateStore.setLoadComponents({
+    page: page,
+    search_query: search_query.value,
+  })
+}
+
+//
+onMounted(async () => {
+  fetchComponents(1)
+})
+</script>
+
+<template>
+  <Modal maxWidth="5xl" :show="show" @close="firstButton" minHeight="" maxHeight="">
+    <div
+      class="w-full relative inline-block align-bottom text-left overflow-hidden transform transition-all sm:align-middle"
+    >
+      <div class="flex items-center border-b border-gray-200 p-4 mb-2">
+        <div class="flex-1">
+          <h3 class="tertiaryHeader my-0 py-0">
+            {{ title }}
+          </h3>
+        </div>
+        <div
+          class="h-10 w-10 flex-start cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white hover:fill-white focus-visible:ring-0"
+          @click="firstButton"
+        >
+          <span class="material-symbols-outlined"> close </span>
+        </div>
+      </div>
+
+      <div class="p-4">
+        <!-- content start -->
+        <template v-if="!getFetchedComponents.isLoading && getFetchedComponents.isError">
+          <p class="myPrimaryInputError">
+            {{ getFetchedComponents.error }}
+          </p>
+        </template>
+
+        <!--  -->
+
+        <!-- Loading # start -->
+        <template v-if="getFetchedComponents && getFetchedComponents.isLoading">
+          <SmallUniversalSpinner
+            class="h-40"
+            width="w-6"
+            height="h-6"
+            border="border-4"
+          ></SmallUniversalSpinner>
+        </template>
+
+        <!-- Actual data # start -->
+        <template v-if="!getFetchedComponents.isError && !getFetchedComponents.isLoading">
+          <div class="flex gap-2 flex-wrap">
+            <button
+              @click="handlecategorySelected({ name: 'Components', id: null })"
+              class="myPrimaryTag font-medium"
+            >
+              Components
+            </button>
+            <button
+              @click="handlecategorySelected({ name: 'HTML Elements', id: null })"
+              class="myPrimaryTag font-medium"
+            >
+              HTML Elements
+            </button>
+          </div>
+
+          <div class="h-full flex md:flex-row flex-col myPrimaryGap mt-2 p-2 overflow-y-scroll">
+            <section class="md:w-4/6">
+              <template v-if="categorySelected && categorySelected.name === 'Components'">
+                <div
+                  class="overflow-scroll min-h-[25rem] max-h-[25rem] grid myPrimaryGap md:grid-cols-2 grid-cols-2 w-full myPrimaryGap px-2 p-4 border border-myPrimaryLightGrayColor rounded-lg"
+                >
+                  <div
+                    class="overflow-hidden whitespace-pre-line flex-1 h-auto rounded-lg border border-gray-200 lg:py-10 py-8 px-2"
+                    v-for="component in getFetchedComponents &&
+                    getFetchedComponents.fetchedData &&
+                    getFetchedComponents.fetchedData.components &&
+                    Array.isArray(getFetchedComponents.fetchedData.components.data) &&
+                    getFetchedComponents.fetchedData.components.data"
+                    :key="component.id"
+                  >
+                    <div class="relative">
+                      <template v-if="component && component.cover_image">
+                        <img
+                          :src="component.cover_image"
+                          alt="placeholder"
+                          class="max-h-72 cursor-pointer object-contain bg-white mx-auto"
+                          @click="handleDropComponent(component)"
+                        />
+                      </template>
+                    </div>
+                  </div>
+                </div>
+              </template>
+              <template v-if="categorySelected && categorySelected.name === 'HTML Elements'">
+                <div
+                  class="overflow-scroll min-h-[25rem] max-h-[25rem] px-2 p-4 border border-myPrimaryLightGrayColor rounded-lg"
+                >
+                  <div class="flex gap-4 flex-wrap w-full">
+                    <!-- Unique HTML Component # start -->
+                    <div v-for="helperComponent in componentHelpers" :key="helperComponent.title">
+                      <div class="flex justify-left items-center gap-4 text-xs font-medium">
+                        <button
+                          @click="handleAddHelperComponent(helperComponent)"
+                          type="button"
+                          class="mySecondaryButton"
+                        >
+                          <span class="material-symbols-outlined text-sm"> add </span>
+                          <span>
+                            {{ helperComponent.title }}
+                          </span>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </section>
+            <aside
+              class="md:w-2/6 overflow-scroll min-h-[30rem] max-h-[30rem] w-full border rounded-lg py-4 px-2"
+            >
+              <div class="flex gap-4 flex-wrap w-full">
+                <!-- Unique HTML Component # start -->
+                <div v-for="helperComponent in componentHelpers" :key="helperComponent.title">
+                  <div class="flex justify-left items-center gap-4 text-xs font-medium">
+                    <button
+                      @click="handleAddHelperComponent(helperComponent)"
+                      type="button"
+                      class="mySecondaryButton"
+                    >
+                      <span class="material-symbols-outlined text-sm"> add </span>
+                      <span>
+                        {{ helperComponent.title }}
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </aside>
+          </div>
+        </template>
+        <!-- Actual data # start -->
+      </div>
+    </div>
+    <div
+      v-if="!getFetchedComponents.isError"
+      class="bg-slate-50 px-2 py-4 flex sm:justify-end justify-center"
+    >
+      <div class="sm:w-3/6 w-full px-2 my-2 flex gap-2 justify-end">
+        <button
+          v-if="firstButtonText"
+          ref="firstButtonRef"
+          class="mySecondaryButton"
+          type="button"
+          @click="firstButton"
+        >
+          {{ firstButtonText }}
+        </button>
+      </div>
+    </div>
+  </Modal>
+</template>

package/src/Components/TipTap/TipTap.vue

@@ -0,0 +1,32 @@
+<script setup>
+import PageBuilder from '@/composables/PageBuilder.ts'
+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)
+</script>
+
+<template>
+  <div>
+    <div class="blockease-linear duration-200 block ease-linear">
+      <template v-if="pageBuilder.selectedElementIsValidText()">
+        <div
+          class="border-t border-myPrimaryLightGrayColor flex flex-row justify-between items-center pl-3 pr-3 py-5 duration-200 hover:bg-myPrimaryLightGrayColor"
+        >
+          <div class="px-2 flex items-center justify-start gap-2">
+            <button
+              @click="pageBuilderStateStore.setShowModalTipTap(true)"
+              type="button"
+              class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
+            >
+              <span class="material-symbols-outlined"> edit </span>
+              <span>Edit text</span>
+            </button>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>