@myissue/vue-website-page-builder 3.0.1

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

@@ -0,0 +1,301 @@
+<script setup>
+import PageBuilder from '@/composables/PageBuilder.ts'
+import EditorAccordion from '../EditorAccordion.vue'
+import { computed, nextTick, ref, watch } from 'vue'
+import { Switch } 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 hyperlinkEnable = ref(false)
+const urlInput = ref(null)
+const openHyperlinkInNewTab = ref(false)
+const getElementContainsHyperlink = computed(() => {
+  return pageBuilderStateStore.getElementContainsHyperlink
+})
+const getHyperlinkAbility = computed(() => {
+  return pageBuilderStateStore.getHyperlinkAbility
+})
+const getHyperlinkMessage = computed(() => {
+  return pageBuilderStateStore.getHyperlinkMessage
+})
+const getHyperlinkError = computed(() => {
+  return pageBuilderStateStore.getHyperlinkError
+})
+const getHyperlinkInput = computed(() => {
+  return pageBuilderStateStore.getHyperlinkInput
+})
+const getHyberlinkEnable = computed(() => {
+  return pageBuilderStateStore.getHyberlinkEnable
+})
+
+const getOpenHyperlinkInNewTab = computed(() => {
+  return pageBuilderStateStore.getOpenHyperlinkInNewTab
+})
+const getElement = computed(() => {
+  return pageBuilderStateStore.getElement
+})
+
+watch(getHyperlinkInput, (newValue) => {
+  urlInput.value = newValue
+})
+watch(getHyberlinkEnable, (newValue) => {
+  hyperlinkEnable.value = newValue
+})
+watch(getOpenHyperlinkInNewTab, (newValue) => {
+  openHyperlinkInNewTab.value = newValue
+})
+
+// remove hyperlink
+watch(hyperlinkEnable, (hyperlinkEnableNewValue) => {
+  hyperlinkEnable.value = hyperlinkEnableNewValue
+  pageBuilderStateStore.setHyberlinkEnable(hyperlinkEnable.value)
+})
+
+const handleToggleHyperlinkEnable = async function (data) {
+  await nextTick()
+
+  // remove hyperlink
+  if (hyperlinkEnable.value === false) {
+    pageBuilder.handleHyperlink(hyperlinkEnable.value, data)
+  }
+}
+// add hyperlink
+const handleHyperlink = function () {
+  pageBuilder.handleHyperlink(hyperlinkEnable.value, urlInput.value, openHyperlinkInNewTab.value)
+}
+
+const handleToggleOpenHyperlinkInNewTab = async function () {
+  await nextTick()
+
+  pageBuilder.handleHyperlink(hyperlinkEnable.value, urlInput.value, openHyperlinkInNewTab.value)
+}
+</script>
+
+<template>
+  <EditorAccordion>
+    <template #title>Link</template>
+    <template #content>
+      <!-- Hyperlink ability / start -->
+      <div v-if="getHyperlinkAbility === false" class="rounded-md bg-red-50 p-2">
+        <div class="flex items-center">
+          <div class="flex-shrink-0">
+            <ExclamationCircleIcon class="w-4 h-4 text-myPrimaryErrorColor"></ExclamationCircleIcon>
+          </div>
+          <div class="ml-2">
+            <p class="text-sm font-medium text-green-800">
+              Not able to add hyperlink on this element
+            </p>
+          </div>
+          <div class="ml-auto pl-3">
+            <div class="-mx-1.5 -my-1.5">
+              <button
+                type="button"
+                class="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50"
+              ></button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Hyperlink ability / end -->
+      <div v-if="getHyperlinkAbility === true">
+        <div class="my-3 py-3">
+          <div class="flex items-center justify-between gap-2 w-full">
+            <p class="myPrimaryParagraph">Enable hyperlink</p>
+            <!-- Toggle start -->
+            <Switch
+              v-model="hyperlinkEnable"
+              @click="handleToggleHyperlinkEnable('removeHyperlink')"
+              :class="[
+                hyperlinkEnable ? 'bg-myPrimaryLinkColor' : 'bg-gray-200',
+                'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-myPrimaryLinkColor focus:ring-offset-2',
+              ]"
+            >
+              <span class="sr-only">Use setting</span>
+              <span
+                :class="[
+                  hyperlinkEnable ? 'translate-x-5' : 'translate-x-0',
+                  'pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
+                ]"
+              >
+                <span
+                  :class="[
+                    hyperlinkEnable
+                      ? 'opacity-0 ease-out duration-100'
+                      : 'opacity-100 ease-in duration-200',
+                    'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity',
+                  ]"
+                  aria-hidden="true"
+                >
+                  <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
+                    <path
+                      d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                </span>
+                <span
+                  :class="[
+                    hyperlinkEnable
+                      ? 'opacity-100 ease-in duration-200'
+                      : 'opacity-0 ease-out duration-100',
+                    'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity',
+                  ]"
+                  aria-hidden="true"
+                >
+                  <svg
+                    class="h-3 w-3 text-myPrimaryLinkColor"
+                    fill="currentColor"
+                    viewBox="0 0 12 12"
+                  >
+                    <path
+                      d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </Switch>
+            <!-- Toggle end -->
+          </div>
+        </div>
+        <!-- attached url - start -->
+        <div v-if="getElementContainsHyperlink === true" class="rounded-md bg-green-50 p-2">
+          <div class="flex items-center">
+            <div class="flex-shrink-0">
+              <span class="myMediumIcon material-symbols-outlined"> check </span>
+            </div>
+            <div class="ml-2">
+              <p class="text-sm font-medium text-green-800">Hyperlink added</p>
+            </div>
+            <div class="ml-auto pl-3">
+              <div class="-mx-1.5 -my-1.5">
+                <button
+                  type="button"
+                  class="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50"
+                ></button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- attached url - end -->
+        <!-- no attached url - start -->
+        <div v-if="getElementContainsHyperlink === false" class="rounded-md bg-red-50 p-2">
+          <div class="flex items-center">
+            <div class="flex-shrink-0">
+              <ExclamationCircleIcon
+                class="w-4 h-4 text-myPrimaryErrorColor"
+              ></ExclamationCircleIcon>
+            </div>
+            <div class="ml-2">
+              <p class="text-sm font-medium text-green-800">No hyperlink added</p>
+            </div>
+            <div class="ml-auto pl-3">
+              <div class="-mx-1.5 -my-1.5">
+                <button
+                  type="button"
+                  class="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50"
+                ></button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- no attached url - end -->
+        <div v-if="hyperlinkEnable === true" class="my-3 py-3">
+          <div class="relative flex items-center w-full border myPrimaryInput py-0 p-0">
+            <input
+              v-model="urlInput"
+              type="text"
+              placeholder="URL.."
+              autocomplete="off"
+              class="myPrimaryInput border-none rounded-r-none ml-0 w-full"
+              @keydown.enter.tab.prevent="handleHyperlink()"
+            />
+            <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>
+
+          <p
+            v-if="getHyperlinkMessage !== null"
+            class="myPrimaryParagraph text-myPrimarySuccesColor mt-1"
+          >
+            {{ getHyperlinkMessage }}
+          </p>
+          <p v-if="getHyperlinkError !== null" class="myPrimaryParagraphError mt-1">
+            {{ getHyperlinkError }}
+          </p>
+
+          <div class="my-3 py-3">
+            <div class="flex items-center justify-between gap-2 w-full">
+              <p class="myPrimaryParagraph">Open in new tab</p>
+              <!-- Toggle start -->
+              <Switch
+                v-model="openHyperlinkInNewTab"
+                @click="handleToggleOpenHyperlinkInNewTab"
+                :class="[
+                  openHyperlinkInNewTab ? 'bg-myPrimaryLinkColor' : 'bg-gray-200',
+                  'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-myPrimaryLinkColor focus:ring-offset-2',
+                ]"
+              >
+                <span class="sr-only">Use setting</span>
+                <span
+                  :class="[
+                    openHyperlinkInNewTab ? 'translate-x-5' : 'translate-x-0',
+                    'pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
+                  ]"
+                >
+                  <span
+                    :class="[
+                      openHyperlinkInNewTab
+                        ? 'opacity-0 ease-out duration-100'
+                        : 'opacity-100 ease-in duration-200',
+                      'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity',
+                    ]"
+                    aria-hidden="true"
+                  >
+                    <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
+                      <path
+                        d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    :class="[
+                      openHyperlinkInNewTab
+                        ? 'opacity-100 ease-in duration-200'
+                        : 'opacity-0 ease-out duration-100',
+                      'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity',
+                    ]"
+                    aria-hidden="true"
+                  >
+                    <svg
+                      class="h-3 w-3 text-myPrimaryLinkColor"
+                      fill="currentColor"
+                      viewBox="0 0 12 12"
+                    >
+                      <path
+                        d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </Switch>
+              <!-- Toggle end -->
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </EditorAccordion>
+</template>

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

@@ -0,0 +1,109 @@
+<script setup>
+import { computed, onMounted, watch } from 'vue'
+import PageBuilder from '@/composables/PageBuilder.ts'
+import { ref } from 'vue'
+import tailwindOpacities from '@/utils/builder/tailwind-opacities'
+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 opacityVueModel = ref(null)
+const getBackgroundOpacity = computed(() => {
+  return pageBuilderStateStore.getBackgroundOpacity
+})
+
+watch(
+  getBackgroundOpacity,
+  (newValue) => {
+    opacityVueModel.value = newValue
+    pageBuilder.handlePageBuilderMethods()
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <div class="my-3 py-3">
+    <label class="myPrimaryInputLabel"> Background opacity</label>
+
+    <Listbox as="div" v-model="opacityVueModel">
+      <div class="relative">
+        <ListboxButton class="myPrimarySelect">
+          <span class="flex items-center gap-2">
+            <div v-if="opacityVueModel === 'none'">
+              <div class="myPrimaryColorPreview border-none">
+                <span class="material-symbols-outlined"> ev_shadow </span>
+              </div>
+            </div>
+
+            <div
+              v-if="opacityVueModel !== 'none'"
+              class="aspect-square w-6 h-6 bg-gray-950"
+              :class="`${opacityVueModel}`"
+            ></div>
+
+            <span class="block truncate" :class="[opacityVueModel !== 'none' ? '' : '']">{{
+              opacityVueModel === 'none' ? 'Transparent' : opacityVueModel
+            }}</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="backgroundOpacity in tailwindOpacities.backgroundOpacities"
+              @click="pageBuilder.handleBackgroundOpacity(backgroundOpacity)"
+              :key="backgroundOpacity"
+              :value="backgroundOpacity"
+              v-slot="{ active }"
+            >
+              <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="backgroundOpacity === 'none'" class="aspect-square w-6 h-6">
+                    <div class="myPrimaryColorPreview border-none">
+                      <span class="material-symbols-outlined"> ev_shadow </span>
+                    </div>
+                  </div>
+
+                  <div
+                    v-if="backgroundOpacity !== 'none'"
+                    class="aspect-square w-6 h-6 bg-gray-950"
+                    :class="`${backgroundOpacity}`"
+                  ></div>
+                  <span v-if="backgroundOpacity !== 'none'" class="ml-3">{{
+                    backgroundOpacity
+                  }}</span>
+                  <span v-if="backgroundOpacity === 'none'" class="ml-3">Transparent</span>
+                </div>
+              </li>
+            </ListboxOption>
+          </ListboxOptions>
+        </transition>
+      </div>
+    </Listbox>
+  </div>
+</template>

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

@@ -0,0 +1,107 @@
+<script setup>
+import { computed, onMounted, watch } from 'vue'
+import PageBuilder from '@/composables/PageBuilder.ts'
+import { ref } from 'vue'
+import tailwindOpacities from '@/utils/builder/tailwind-opacities'
+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 opacityVueModel = ref(null)
+const getOpacity = computed(() => {
+  return pageBuilderStateStore.getOpacity
+})
+
+watch(
+  getOpacity,
+  (newValue) => {
+    opacityVueModel.value = newValue
+    pageBuilder.handlePageBuilderMethods()
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <div class="my-3 py-3">
+    <label class="myPrimaryInputLabel"> Opacity</label>
+
+    <Listbox as="div" v-model="opacityVueModel">
+      <div class="relative">
+        <ListboxButton class="myPrimarySelect">
+          <span class="flex items-center gap-2">
+            <div v-if="opacityVueModel === 'none'">
+              <div class="myPrimaryColorPreview border-none">
+                <span class="material-symbols-outlined"> ev_shadow </span>
+              </div>
+            </div>
+
+            <div
+              v-if="opacityVueModel !== 'none'"
+              class="aspect-square w-6 h-6 bg-gray-950"
+              :class="`${opacityVueModel}`"
+            ></div>
+
+            <span class="block truncate" :class="[opacityVueModel !== 'none' ? '' : '']">{{
+              opacityVueModel === 'none' ? 'Transparent' : opacityVueModel
+            }}</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="elementOpacity in tailwindOpacities.opacities"
+              @click="pageBuilder.handleOpacity(elementOpacity)"
+              :key="elementOpacity"
+              :value="elementOpacity"
+              v-slot="{ active }"
+            >
+              <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="elementOpacity === 'none'">
+                    <div class="myPrimaryColorPreview border-none">
+                      <span class="material-symbols-outlined"> ev_shadow </span>
+                    </div>
+                  </div>
+
+                  <div
+                    v-if="elementOpacity !== 'none'"
+                    class="aspect-square w-6 h-6 bg-gray-950"
+                    :class="`${elementOpacity}`"
+                  ></div>
+                  <span v-if="elementOpacity === 'none'" class="ml-3">Transparent</span>
+                  <span v-if="elementOpacity !== 'none'" class="ml-3">{{ elementOpacity }}</span>
+                </div>
+              </li>
+            </ListboxOption>
+          </ListboxOptions>
+        </transition>
+      </div>
+    </Listbox>
+  </div>
+</template>

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

@@ -0,0 +1,16 @@
+<script setup>
+import EditorAccordion from '@/Components/PageBuilder/EditorMenu/EditorAccordion.vue';
+import ManageBackgroundOpacity from '@/Components/PageBuilder/EditorMenu/Editables/ManageBackgroundOpacity.vue';
+import ManageOpacity from '@/Components/PageBuilder/EditorMenu/Editables/ManageOpacity.vue';
+</script>
+
+<template>
+  <EditorAccordion>
+    <template #title>Opacity settings</template>
+    <template #content>
+      <!-- Text color - end -->
+      <ManageOpacity></ManageOpacity>
+      <ManageBackgroundOpacity></ManageBackgroundOpacity>
+    </template>
+  </EditorAccordion>
+</template>

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

@@ -0,0 +1,134 @@
+<script setup>
+import tailwindPaddingPlusMargin from '@/utils/builder/tailwind-padding-margin'
+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 fontVerticalPadding = ref(null)
+const fontHorizontalPadding = ref(null)
+const fontVerticalMargin = ref(null)
+const fontHorizontalMargin = ref(null)
+const getFontVerticalPadding = computed(() => {
+  return pageBuilderStateStore.getFontVerticalPadding
+})
+const getFontHorizontalPadding = computed(() => {
+  return pageBuilderStateStore.getFontHorizontalPadding
+})
+const getFontVerticalMargin = computed(() => {
+  return pageBuilderStateStore.getFontVerticalMargin
+})
+const getFontHorizontalMargin = computed(() => {
+  return pageBuilderStateStore.getFontHorizontalMargin
+})
+
+watch(
+  getFontVerticalPadding,
+  (newValue) => {
+    fontVerticalPadding.value = newValue
+    pageBuilder.handlePageBuilderMethods()
+  },
+  { immediate: true },
+)
+watch(
+  getFontHorizontalPadding,
+  (newValue) => {
+    fontHorizontalPadding.value = newValue
+    pageBuilder.handlePageBuilderMethods()
+  },
+  { immediate: true },
+)
+watch(
+  getFontVerticalMargin,
+  (newValue) => {
+    fontVerticalMargin.value = newValue
+    pageBuilder.handlePageBuilderMethods()
+  },
+  { immediate: true },
+)
+watch(
+  getFontHorizontalMargin,
+  (newValue) => {
+    fontHorizontalMargin.value = newValue
+    pageBuilder.handlePageBuilderMethods()
+  },
+  { immediate: true },
+)
+</script>
+<template>
+  <EditorAccordion>
+    <template #title>Padding & Margin</template>
+    <template #content>
+      <p class="myPrimaryParagraph font-medium py-0 my-4">Padding</p>
+      <div class="my-3 py-3">
+        <label class="myPrimaryInputLabel"> Padding Y-axis </label>
+        <select
+          v-model="fontVerticalPadding"
+          class="myPrimarySelect"
+          @change="pageBuilder.handleVerticalPadding(fontVerticalPadding)"
+        >
+          <option disabled value="">Select</option>
+          <option
+            v-for="verticalPadding in tailwindPaddingPlusMargin.verticalPadding"
+            :key="verticalPadding"
+          >
+            {{ verticalPadding }}
+          </option>
+        </select>
+      </div>
+      <div class="my-3 py-3">
+        <label class="myPrimaryInputLabel"> Padding X-axis </label>
+        <select
+          v-model="fontHorizontalPadding"
+          class="myPrimarySelect"
+          @change="pageBuilder.handleHorizontalPadding(fontHorizontalPadding)"
+        >
+          <option disabled value="">Select</option>
+          <option
+            v-for="horizontalPadding in tailwindPaddingPlusMargin.horizontalPadding"
+            :key="horizontalPadding"
+          >
+            {{ horizontalPadding }}
+          </option>
+        </select>
+      </div>
+      <p class="myPrimaryParagraph font-medium py-0 my-4">Margin</p>
+      <div class="my-3 py-3">
+        <label class="myPrimaryInputLabel"> Margin Y-axis </label>
+        <select
+          v-model="fontVerticalMargin"
+          class="myPrimarySelect"
+          @change="pageBuilder.handleVerticalMargin(fontVerticalMargin)"
+        >
+          <option disabled value="">Select</option>
+          <option
+            v-for="verticalMargin in tailwindPaddingPlusMargin.verticalMargin"
+            :key="verticalMargin"
+          >
+            {{ verticalMargin }}
+          </option>
+        </select>
+      </div>
+      <div class="my-3 py-3">
+        <label class="myPrimaryInputLabel"> Margin X-axis </label>
+        <select
+          v-model="fontHorizontalMargin"
+          class="myPrimarySelect"
+          @change="pageBuilder.handleHorizontalMargin(fontHorizontalMargin)"
+        >
+          <option disabled value="">Select</option>
+          <option
+            v-for="horizontalMargin in tailwindPaddingPlusMargin.horizontalMargin"
+            :key="horizontalMargin"
+          >
+            {{ horizontalMargin }}
+          </option>
+        </select>
+      </div>
+    </template>
+  </EditorAccordion>
+</template>