@myissue/vue-website-page-builder 3.0.1

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

@@ -0,0 +1,163 @@
+<script setup>
+import tailwindBorderRadius from '@/utils/builder/tailwind-border-radius'
+import PageBuilder from '@/composables/PageBuilder.ts'
+import EditorAccordion from '@/Components/PageBuilder/EditorMenu/EditorAccordion.vue'
+import { computed, ref, watch } from '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 borderRadiusGlobal = ref(null)
+const borderRadiusTopLeft = ref(null)
+const borderRadiusTopRight = ref(null)
+const borderRadiusBottomleft = ref(null)
+const borderRadiusBottomRight = ref(null)
+const getBorderRadiusGlobal = computed(() => {
+  return pageBuilderStateStore.getBorderRadiusGlobal
+})
+const getBorderRadiusTopLeft = computed(() => {
+  return pageBuilderStateStore.getBorderRadiusTopLeft
+})
+const getBorderRadiusTopRight = computed(() => {
+  return pageBuilderStateStore.getBorderRadiusTopRight
+})
+const getBorderRadiusBottomleft = computed(() => {
+  return pageBuilderStateStore.getBorderRadiusBottomleft
+})
+const getBorderRadiusBottomRight = computed(() => {
+  return pageBuilderStateStore.getBorderRadiusBottomRight
+})
+
+watch(
+  getBorderRadiusGlobal,
+  (newValue) => {
+    borderRadiusGlobal.value = newValue
+    pageBuilder.handlePageBuilderMethods()
+  },
+  { immediate: true },
+)
+watch(
+  getBorderRadiusTopLeft,
+  (newValue) => {
+    borderRadiusTopLeft.value = newValue
+    pageBuilder.handlePageBuilderMethods()
+  },
+  { immediate: true },
+)
+watch(
+  getBorderRadiusTopRight,
+  (newValue) => {
+    borderRadiusTopRight.value = newValue
+    pageBuilder.handlePageBuilderMethods()
+  },
+  { immediate: true },
+)
+watch(
+  getBorderRadiusBottomleft,
+  (newValue) => {
+    borderRadiusBottomleft.value = newValue
+    pageBuilder.handlePageBuilderMethods()
+  },
+  { immediate: true },
+)
+watch(
+  getBorderRadiusBottomRight,
+  (newValue) => {
+    borderRadiusBottomRight.value = newValue
+    pageBuilder.handlePageBuilderMethods()
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <EditorAccordion>
+    <template #title>Border Radius</template>
+    <template #content>
+      <p class="myPrimaryParagraph font-medium py-0 my-4">Global</p>
+      <div class="my-3 py-3">
+        <label class="myPrimaryInputLabel"> Border Radius </label>
+        <select
+          v-model="borderRadiusGlobal"
+          class="myPrimarySelect"
+          @change="pageBuilder.handleBorderRadiusGlobal(borderRadiusGlobal)"
+        >
+          <option disabled value="">Select</option>
+          <option
+            v-for="borderRadiusGlobal in tailwindBorderRadius.roundedGlobal"
+            :key="borderRadiusGlobal"
+          >
+            {{ borderRadiusGlobal }}
+          </option>
+        </select>
+      </div>
+      <p class="myPrimaryParagraph font-medium py-0 my-4">Specific</p>
+      <div class="my-3 py-3">
+        <label class="myPrimaryInputLabel"> Border Radius top left </label>
+        <select
+          v-model="borderRadiusTopLeft"
+          class="myPrimarySelect"
+          @change="pageBuilder.handleBorderRadiusTopLeft(borderRadiusTopLeft)"
+        >
+          <option disabled value="">Select</option>
+          <option
+            v-for="borderRadiusTopLeft in tailwindBorderRadius.roundedTopLeft"
+            :key="borderRadiusTopLeft"
+          >
+            {{ borderRadiusTopLeft }}
+          </option>
+        </select>
+      </div>
+      <div class="my-3 py-3">
+        <label class="myPrimaryInputLabel"> Border Radius top right </label>
+        <select
+          v-model="borderRadiusTopRight"
+          class="myPrimarySelect"
+          @change="pageBuilder.handleBorderRadiusTopRight(borderRadiusTopRight)"
+        >
+          <option disabled value="">Select</option>
+          <option
+            v-for="borderRadiusTopRight in tailwindBorderRadius.roundedTopRight"
+            :key="borderRadiusTopRight"
+          >
+            {{ borderRadiusTopRight }}
+          </option>
+        </select>
+      </div>
+      <div class="my-3 py-3">
+        <label class="myPrimaryInputLabel"> Border Radius bottom left </label>
+        <select
+          v-model="borderRadiusBottomleft"
+          class="myPrimarySelect"
+          @change="pageBuilder.handleBorderRadiusBottomleft(borderRadiusBottomleft)"
+        >
+          <option disabled value="">Select</option>
+          <option
+            v-for="borderRadiusBottomleft in tailwindBorderRadius.roundedBottomLeft"
+            :key="borderRadiusBottomleft"
+          >
+            {{ borderRadiusBottomleft }}
+          </option>
+        </select>
+      </div>
+      <div class="my-3 py-3">
+        <label class="myPrimaryInputLabel"> Border Radius bottom right </label>
+        <select
+          v-model="borderRadiusBottomRight"
+          class="myPrimarySelect"
+          @change="pageBuilder.handleBorderRadiusBottomRight(borderRadiusBottomRight)"
+        >
+          <option disabled value="">Select</option>
+          <option
+            v-for="borderRadiusBottomRight in tailwindBorderRadius.roundedBottomRight"
+            :key="borderRadiusBottomRight"
+          >
+            {{ borderRadiusBottomRight }}
+          </option>
+        </select>
+      </div>
+    </template>
+  </EditorAccordion>
+</template>

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

@@ -0,0 +1,164 @@
+<script setup>
+import tailwindBorderStyleWidthPlusColor from '@/utils/builder/tailwind-border-style-width-color'
+import PageBuilder from '@/composables/PageBuilder.ts'
+import EditorAccordion from '@/Components/PageBuilder/EditorMenu/EditorAccordion.vue'
+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 borderStyle = ref(null)
+const borderWidth = ref(null)
+const borderColor = ref(null)
+const getBorderStyle = computed(() => {
+  return pageBuilderStateStore.getBorderStyle
+})
+const getBorderWidth = computed(() => {
+  return pageBuilderStateStore.getBorderWidth
+})
+const getBorderColor = computed(() => {
+  return pageBuilderStateStore.getBorderColor
+})
+
+watch(
+  getBorderStyle,
+  (newValue) => {
+    borderStyle.value = newValue
+    pageBuilder.handlePageBuilderMethods()
+  },
+  { immediate: true },
+)
+watch(
+  getBorderWidth,
+  (newValue) => {
+    borderWidth.value = newValue
+    pageBuilder.handlePageBuilderMethods()
+  },
+  { immediate: true },
+)
+watch(
+  getBorderColor,
+  (newValue) => {
+    borderColor.value = newValue
+    pageBuilder.handlePageBuilderMethods()
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <EditorAccordion>
+    <template #title>Border Style, Width & Color</template>
+    <template #content>
+      <div class="my-3 py-3">
+        <label class="myPrimaryInputLabel"> Border Style </label>
+        <select
+          v-model="borderStyle"
+          class="myPrimarySelect"
+          @change="pageBuilder.handleBorderStyle(borderStyle)"
+        >
+          <option disabled value="">Select</option>
+          <option
+            v-for="borderStyle in tailwindBorderStyleWidthPlusColor.borderStyle"
+            :key="borderStyle"
+          >
+            {{ borderStyle }}
+          </option>
+        </select>
+      </div>
+      <div class="my-3 py-3">
+        <label class="myPrimaryInputLabel"> Border Width </label>
+        <select
+          v-model="borderWidth"
+          class="myPrimarySelect"
+          @change="pageBuilder.handleBorderWidth(borderWidth)"
+        >
+          <option disabled value="">Select</option>
+          <option
+            v-for="borderWidth in tailwindBorderStyleWidthPlusColor.borderWidth"
+            :key="borderWidth"
+          >
+            {{ borderWidth }}
+          </option>
+        </select>
+      </div>
+
+      <label class="myPrimaryInputLabel"> Border Color </label>
+      <Listbox as="div" v-model="borderColor">
+        <div class="relative mt-2">
+          <ListboxButton class="myPrimarySelect">
+            <span class="flex items-center gap-2">
+              <div v-if="getBorderColor === 'none'">
+                <div class="myPrimaryColorPreview border-none">
+                  <span class="material-symbols-outlined"> ev_shadow </span>
+                </div>
+              </div>
+              <div
+                v-if="borderColor !== 'none'"
+                class="aspect-square w-6 h-6 border border-gray-100 rounded-sm"
+                :class="`bg-${borderColor?.replace('border-', '')}`"
+              ></div>
+              <span class="block truncate">{{ borderColor }}</span>
+            </span>
+            <span
+              class="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2"
+            >
+              <span class="material-symbols-outlined"> keyboard_arrow_down </span>
+            </span>
+          </ListboxButton>
+
+          <transition
+            leave-active-class="transition ease-in duration-100"
+            leave-from-class="opacity-100"
+            leave-to-class="opacity-0"
+          >
+            <ListboxOptions
+              class="absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white 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 tailwindBorderStyleWidthPlusColor.borderColor"
+                @click="pageBuilder.handleBorderColor(borderColor)"
+                :key="color"
+                :value="color"
+                v-slot="{ active, borderColor }"
+              >
+                <li
+                  :class="[
+                    active ? 'bg-myPrimaryLinkColor text-white' : 'text-myPrimaryDarkGrayColor',
+                    'relative cursor-default select-none py-2 pl-3 pr-9',
+                  ]"
+                >
+                  <div class="flex items-center">
+                    <div v-if="color === 'none'">
+                      <div class="myPrimaryColorPreview border-none">
+                        <span class="material-symbols-outlined"> ev_shadow </span>
+                      </div>
+                    </div>
+
+                    <div
+                      v-if="color !== 'none'"
+                      class="aspect-square w-6 h-6 bg-gray-950"
+                      :class="`bg-${color.replace('border-', '')}`"
+                    ></div>
+                    <span v-if="color === 'none'" class="ml-3">Transparent</span>
+                    <span v-if="color !== 'none'" class="ml-3">{{ color }}</span>
+                  </div>
+                </li>
+              </ListboxOption>
+            </ListboxOptions>
+          </transition>
+        </div>
+      </Listbox>
+    </template>
+  </EditorAccordion>
+</template>

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

@@ -0,0 +1,80 @@
+<script setup>
+import { computed, ref, watch } from 'vue'
+import EditorAccordion from '@/Components/PageBuilder/EditorMenu/EditorAccordion.vue'
+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)
+const currentClasses = ref(null)
+const getCurrentClasses = computed(() => {
+  return pageBuilderStateStore.getCurrentClasses
+})
+
+watch(
+  getCurrentClasses,
+  (newValue) => {
+    currentClasses.value = newValue
+  },
+  { immediate: true },
+)
+
+const inputClass = ref('')
+
+const handleAddClasses = function () {
+  pageBuilder.handleAddClasses(inputClass.value)
+  pageBuilder.handlePageBuilderMethods()
+
+  inputClass.value = ''
+}
+</script>
+
+<template>
+  <EditorAccordion>
+    <template #title>Generated CSS</template>
+    <template #content>
+      <div class="flex flex-row flex-wrap gap-2 mt-2 mb-4">
+        <div
+          v-for="className in currentClasses"
+          :key="className"
+          class="myPrimaryTag cursor-pointer hover:bg-myPrimaryErrorColor hover:text-white text-xs py-2 font-medium"
+          @click="
+            () => {
+              pageBuilder.handleRemoveClasses(className)
+              pageBuilder.handlePageBuilderMethods()
+            }
+          "
+        >
+          <div class="flex items-center gap-1">
+            <span class="mr-1">
+              {{ className }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex gap-2 item-center flex-col">
+        <div class="flex gap-2 item-center">
+          <div class="mt-1 relative flex items-center w-full border myPrimaryInput py-0 p-0">
+            <input
+              v-model="inputClass"
+              type="text"
+              placeholder="Type class"
+              @keydown.enter="handleAddClasses()"
+              autocomplete="off"
+              class="myPrimaryInput border-none rounded-r-none ml-0 w-full"
+            />
+            <div
+              class="border border-gray-200 border-none rounded flex items-center justify-center h-full w-8"
+            >
+              <kbd class="myPrimaryParagraph text-gray-400 border-none"> ⏎ </kbd>
+            </div>
+          </div>
+        </div>
+        <p class="myPrimaryInputError"></p>
+      </div>
+    </template>
+  </EditorAccordion>
+</template>

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

@@ -0,0 +1,93 @@
+<script setup>
+import DynamicModal from '@/Components/Modals/DynamicModal.vue'
+import PageBuilder from '@/composables/PageBuilder.ts'
+import { ref } from 'vue'
+import { usePageBuilderStateStore } from '@/stores/page-builder-state'
+import { useMediaLibraryStore } from '@/stores/media-library'
+
+const mediaLibraryStore = useMediaLibraryStore()
+const pageBuilderStateStore = usePageBuilderStateStore()
+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 firstModalButtonFunction = ref(null)
+const secondModalButtonFunction = ref(null)
+const thirdModalButtonFunction = ref(null)
+const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
+
+// remove component
+const deleteComponent = function (e) {
+  showModalDeleteComponent.value = true
+  typeModal.value = 'delete'
+  gridColumnModal.value = 2
+  titleModal.value = 'Remove Component?'
+  descriptionModal.value = 'Are you sure you want to remove this Component?'
+  firstButtonModal.value = 'Close'
+  secondButtonModal.value = null
+  thirdButtonModal.value = 'Delete'
+
+  // handle click
+  firstModalButtonFunction.value = function () {
+    showModalDeleteComponent.value = false
+  }
+  //
+  // handle click
+  thirdModalButtonFunction.value = function () {
+    pageBuilder.deleteComponent()
+
+    showModalDeleteComponent.value = false
+  }
+  // end modal
+}
+</script>
+
+<template>
+  <DynamicModal
+    :show="showModalDeleteComponent"
+    :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 class="flex flex-col items-center justify-center myPrimaryGap">
+    <div class="flex gap-2 items-center justify-center">
+      <div
+        @click="deleteComponent()"
+        class="h-10 w-10 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="material-symbols-outlined"> delete_forever </span>
+      </div>
+    </div>
+
+    <button
+      type="button"
+      @click="pageBuilder.moveComponent(-1)"
+      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"> move_up </span>
+    </button>
+    <button
+      type="button"
+      @click="pageBuilder.moveComponent(1)"
+      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"> move_down </span>
+    </button>
+  </div>
+</template>

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

@@ -0,0 +1,42 @@
+<script setup>
+import EditorAccordion from '../EditorAccordion.vue'
+import { computed, ref } from 'vue'
+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)
+const getRestoredElement = computed(() => {
+  return pageBuilderStateStore.getRestoredElement
+})
+</script>
+
+<template>
+  <EditorAccordion>
+    <template #title>Delete or restore</template>
+    <template #content>
+      <div class="my-2">
+        <button
+          v-if="getRestoredElement !== null"
+          @click="pageBuilder.handleRestoreElement"
+          type="button"
+          class="myPrimaryButton gap-2 items-center w-full"
+        >
+          <span class="material-symbols-outlined"> refresh </span>
+          Restore Element
+        </button>
+        <button
+          v-if="getRestoredElement === null"
+          @click="pageBuilder.handleDeleteElement"
+          type="button"
+          class="myPrimaryDeleteButton gap-2 items-center w-full"
+        >
+          <span class="myMediumIcon material-symbols-outlined"> delete </span>
+          Delete Element
+        </button>
+      </div>
+    </template>
+  </EditorAccordion>
+</template>