@myissue/vue-website-page-builder 3.0.1

package/src/Components/PageBuilder/EditorMenu/Editables/TextColorEditor.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 textColor = ref(null)
+const getTextColor = computed(() => {
+  return pageBuilderStateStore.getTextColor
+})
+
+watch(
+  getTextColor,
+  (newValue) => {
+    textColor.value = newValue
+    pageBuilder.handlePageBuilderMethods()
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <Listbox as="div" v-model="textColor">
+    <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="getTextColor === 'none'" class="flex gap-2 items-center">
+          <span class="material-symbols-outlined"> format_color_text </span>
+          <span class="block truncate text-[12.5px]">Text color</span>
+        </div>
+        <div v-if="textColor !== 'none'" class="flex items-center gap-2">
+          <div
+            class="aspect-square w-6 h-6 border border-gray-800 rounded-sm"
+            :class="`bg-${textColor?.replace('text-', '')}`"
+          ></div>
+          <span class="block truncate text-[12.5px]">{{ textColor }}</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.textColorVariables"
+            @click="pageBuilder.handleTextColor(textColor)"
+            :key="color"
+            :value="color"
+            v-slot="{ active, textColor }"
+          >
+            <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"> invert_colors </span>
+                <span class="ml-3">Default black</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('text-', '')}`"
+                ></div>
+                <span class="ml-3">{{ color }}</span>
+              </div>
+            </li>
+          </ListboxOption>
+        </ListboxOptions>
+      </transition>
+    </div>
+  </Listbox>
+</template>

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

@@ -0,0 +1,199 @@
+<script setup>
+import PageBuilder from '@/composables/PageBuilder.ts'
+import EditorAccordion from '@/Components/PageBuilder/EditorMenu/EditorAccordion.vue'
+import tailwindFontSizes from '@/utils/builder/tailwind-font-sizes'
+import tailwindFontStyles from '@/utils/builder/tailwind-font-styles'
+import { computed, ref, watch } from 'vue'
+import { usePageBuilderStateStore } from '@/stores/page-builder-state'
+
+const pageBuilderStateStore = usePageBuilderStateStore()
+const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
+const fontBase = ref(null)
+const fontDesktop = ref(null)
+const fontTablet = ref(null)
+const fontMobile = ref(null)
+const fontWeight = ref(null)
+const fontFamily = ref(null)
+const fontStyle = ref(null)
+const getFontBase = computed(() => {
+  return pageBuilderStateStore.getFontBase
+})
+const getFontDesktop = computed(() => {
+  return pageBuilderStateStore.getFontDesktop
+})
+const getFontTablet = computed(() => {
+  return pageBuilderStateStore.getFontTablet
+})
+const getFontMobile = computed(() => {
+  return pageBuilderStateStore.getFontMobile
+})
+const getFontWeight = computed(() => {
+  return pageBuilderStateStore.getFontWeight
+})
+const getFontFamily = computed(() => {
+  return pageBuilderStateStore.getFontFamily
+})
+const getFontStyle = computed(() => {
+  return pageBuilderStateStore.getFontStyle
+})
+
+watch(
+  getFontBase,
+  (newValue) => {
+    fontBase.value = newValue
+    pageBuilder.handlePageBuilderMethods()
+  },
+  { immediate: true },
+)
+watch(
+  getFontDesktop,
+  (newValue) => {
+    fontDesktop.value = newValue
+    pageBuilder.handlePageBuilderMethods()
+  },
+  { immediate: true },
+)
+watch(
+  getFontTablet,
+  (newValue) => {
+    fontTablet.value = newValue
+    pageBuilder.handlePageBuilderMethods()
+  },
+  { immediate: true },
+)
+watch(
+  getFontMobile,
+  (newValue) => {
+    fontMobile.value = newValue
+    pageBuilder.handlePageBuilderMethods()
+  },
+  { immediate: true },
+)
+watch(
+  getFontWeight,
+  (newValue) => {
+    fontWeight.value = newValue
+    pageBuilder.handlePageBuilderMethods()
+  },
+  { immediate: true },
+)
+watch(
+  getFontFamily,
+  (newValue) => {
+    fontFamily.value = newValue
+    pageBuilder.handlePageBuilderMethods()
+  },
+  { immediate: true },
+)
+watch(
+  getFontStyle,
+  (newValue) => {
+    fontStyle.value = newValue
+    pageBuilder.handlePageBuilderMethods()
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <EditorAccordion>
+    <template #title> Typographies </template>
+    <template #content>
+      <!-- FONT SIZES -->
+      <p class="myPrimaryParagraph font-medium py-0 my-4">Font sizes</p>
+      <div class="my-3 py-3">
+        <label class="myPrimaryInputLabel"> Font Base </label>
+        <select
+          v-model="fontBase"
+          class="myPrimarySelect"
+          @change="pageBuilder.handleFontSize(fontBase)"
+        >
+          <option disabled value="">Select</option>
+          <option v-for="fontSize in tailwindFontSizes.fontBase" :key="fontSize">
+            {{ fontSize }}
+          </option>
+        </select>
+      </div>
+      <div class="my-3 py-3">
+        <label class="myPrimaryInputLabel"> Font desktop size </label>
+        <select
+          v-model="fontDesktop"
+          class="myPrimarySelect"
+          @change="pageBuilder.handleFontSize(fontDesktop)"
+        >
+          <option disabled value="">Select</option>
+          <option v-for="fontSize in tailwindFontSizes.fontDesktop" :key="fontSize">
+            {{ fontSize }}
+          </option>
+        </select>
+      </div>
+      <div class="my-3 py-3">
+        <label class="myPrimaryInputLabel"> Font tablet size </label>
+        <select
+          v-model="fontTablet"
+          class="myPrimarySelect"
+          @change="pageBuilder.handleFontSize(fontTablet)"
+        >
+          <option disabled value="">Select</option>
+          <option v-for="fontSize in tailwindFontSizes.fontTablet" :key="fontSize">
+            {{ fontSize }}
+          </option>
+        </select>
+      </div>
+      <div class="my-3 py-3">
+        <label class="myPrimaryInputLabel"> Font mobile size </label>
+        <select
+          v-model="fontMobile"
+          class="myPrimarySelect"
+          @change="pageBuilder.handleFontSize(fontMobile)"
+        >
+          <option disabled value="">Select</option>
+          <option v-for="fontSize in tailwindFontSizes.fontMobile" :key="fontSize">
+            {{ fontSize }}
+          </option>
+        </select>
+      </div>
+      <hr />
+      <p class="myPrimaryParagraph font-medium py-0 my-4">Font general</p>
+      <div class="my-3 py-3">
+        <label class="myPrimaryInputLabel"> Font weight </label>
+        <select
+          v-model="fontWeight"
+          class="myPrimarySelect"
+          @change="pageBuilder.handleFontWeight(fontWeight)"
+        >
+          <option disabled value="">Select</option>
+          <option v-for="fontWeight in tailwindFontStyles.fontWeight" :key="fontWeight">
+            {{ fontWeight }}
+          </option>
+        </select>
+      </div>
+      <div class="my-3 py-3">
+        <label class="myPrimaryInputLabel"> Font family </label>
+        <select
+          v-model="fontFamily"
+          class="myPrimarySelect"
+          @change="pageBuilder.handleFontFamily(fontFamily)"
+        >
+          <option disabled value="">Select</option>
+          <option v-for="fontFamily in tailwindFontStyles.fontFamily" :key="fontFamily">
+            {{ fontFamily }}
+          </option>
+        </select>
+      </div>
+      <div class="my-3 py-3">
+        <label class="myPrimaryInputLabel"> Font Style </label>
+        <select
+          v-model="fontStyle"
+          class="myPrimarySelect"
+          @change="pageBuilder.handleFontStyle(fontStyle)"
+        >
+          <option disabled value="">Select</option>
+          <option v-for="fontStyle in tailwindFontStyles.fontStyle" :key="fontStyle">
+            {{ fontStyle }}
+          </option>
+        </select>
+      </div>
+    </template>
+  </EditorAccordion>
+</template>

package/src/Components/PageBuilder/EditorMenu/EditorAccordion.vue

@@ -0,0 +1,42 @@
+<template>
+  <div
+    class="flex flex-col"
+    :class="{ 'pb-8': expanded }"
+  >
+    <div
+      class="border-t border-myPrimaryLightGrayColor flex flex-row justify-between items-center pl-3 pr-3 py-5 cursor-pointer duration-200 hover:bg-myPrimaryLightGrayColor"
+      @click="expanded = !expanded"
+    >
+      <p class="myPrimaryParagraph font-medium my-0 py-0">
+        <slot name="title" />
+      </p>
+
+      <template v-if="expanded">
+        <span class="material-symbols-outlined"> keyboard_arrow_down </span>
+      </template>
+      <template v-if="!expanded">
+        <span class="material-symbols-outlined"> chevron_right </span>
+      </template>
+    </div>
+    <div
+      :class="[expanded ? 'block' : 'hidden']"
+      class="px-4 ease-linear duration-75 bg-white mt-4"
+    >
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const expanded = ref(false);
+
+    return {
+      expanded,
+    };
+  },
+};
+</script>

package/src/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue

@@ -0,0 +1,113 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+import ClassEditor from '@/Components/PageBuilder/EditorMenu/Editables/ClassEditor.vue';
+import ImageEditor from '@/Components/PageBuilder/EditorMenu/Editables/ImageEditor.vue';
+import OpacityEditor from '@/Components/PageBuilder/EditorMenu/Editables/OpacityEditor.vue';
+import Typography from '@/Components/PageBuilder/EditorMenu/Editables/Typography.vue';
+import PaddingPlusMargin from '@/Components/PageBuilder/EditorMenu/Editables/PaddingPlusMargin.vue';
+import DeleteElement from '@/Components/PageBuilder/EditorMenu/Editables/DeleteElement.vue';
+import BorderRadius from '@/Components/PageBuilder/EditorMenu/Editables/BorderRadius.vue';
+import BackgroundColorEditor from '@/Components/PageBuilder/EditorMenu/Editables/BackgroundColorEditor.vue';
+import Borders from '@/Components/PageBuilder/EditorMenu/Editables/Borders.vue';
+import LinkEditor from '@/Components/PageBuilder/EditorMenu/Editables/LinkEditor.vue';
+import TipTap from '@/Components/TipTap/TipTap.vue';
+import { usePageBuilderStateStore } from '@/stores/page-builder-state';
+import ElementEditor from '@/Components/PageBuilder/EditorMenu/Editables/ElementEditor.vue';
+
+const pageBuilderStateStore = usePageBuilderStateStore();
+
+// emit
+const emit = defineEmits(['closeEditor']);
+
+// get current element tag
+const getElement = computed(() => {
+  return pageBuilderStateStore.getElement;
+});
+
+// Get tagName of element
+const elementTag = computed(() => {
+  return getElement.value?.tagName;
+});
+
+const isHeadingElement = computed(() => {
+  return (
+    (getElement.value instanceof HTMLElement &&
+      getElement.value.innerText.trim() !== ' ') ||
+    getElement.value instanceof HTMLImageElement
+  );
+});
+</script>
+
+<template>
+  <div class="h-full w-80 bg-white">
+    <div class="h-screen flex flex-col">
+      <div
+        class="flex flex-row justify-between pt-2.5 pr-4 pl-4 items-center mb-3"
+      >
+        <button
+          type="button"
+          @click="$emit('closeEditor')"
+          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>
+        <p class="font-medium text-sm">
+          Editing
+          <span class="lowercase">&lt;{{ elementTag }}&gt;</span>
+        </p>
+      </div>
+
+      <div class="pl-3 pr-3 mb-4 overflow-y-scroll md:pb-24 pb-12">
+        <div v-show="isHeadingElement === true">
+          <article>
+            <ImageEditor> </ImageEditor>
+          </article>
+          <article>
+            <TipTap></TipTap>
+          </article>
+          <article
+            v-if="
+              false &&
+              $page.props.user.superadmin !== null &&
+              $page.props.user.superadmin.role === 'admin'
+            "
+          >
+            <LinkEditor></LinkEditor>
+          </article>
+          <article
+            v-if="
+              false &&
+              $page.props.user.superadmin !== null &&
+              $page.props.user.superadmin.role === 'admin'
+            "
+          >
+            <Typography></Typography>
+          </article>
+
+          <article>
+            <OpacityEditor> </OpacityEditor>
+          </article>
+          <article>
+            <PaddingPlusMargin> </PaddingPlusMargin>
+          </article>
+          <article>
+            <BorderRadius></BorderRadius>
+          </article>
+          <article>
+            <Borders></Borders>
+          </article>
+          <article>
+            <ClassEditor></ClassEditor>
+          </article>
+        </div>
+
+        <div>
+          <article>
+            <ElementEditor></ElementEditor>
+          </article>
+        </div>
+        <article class="min-h-[12em]"></article>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,229 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { usePageBuilderStateStore } from '@/stores/page-builder-state';
+
+const pageBuilderStateStore = usePageBuilderStateStore();
+const getElement = computed(() => {
+  return pageBuilderStateStore.getElement;
+});
+const getComponent = computed(() => {
+  return pageBuilderStateStore.getComponent;
+});
+const getComponents = computed(() => {
+  return pageBuilderStateStore.getComponents;
+});
+const current = ref('element');
+
+const updateCurrentTab = function (tab) {
+  current.value = tab;
+};
+</script>
+
+<template>
+  <div class="my-8">
+    <div
+      class="flex items-left flex-col myPrimaryGap border-myPrimaryMediumGrayColor"
+    >
+      <h4 class="myQuaternaryHeader">Selected HTML</h4>
+      <p class="myPrimaryParagraph text-xs">
+        Overview of Selected Element, Component, and Components. This section
+        provides real-time updates based on your HTML selection.
+      </p>
+
+      <!-- Types - start -->
+      <div>
+        <h4 class="myPrimaryParagraph text-sm pb-2">Types</h4>
+        <div class="text-white overflow-hidden bg-gray-900 max-w-2xl">
+          <div class="flex bg-gray-800/40 ring-1 ring-white/5">
+            <div
+              class="-mb-px flex text-xs font-medium text-myPrimaryMediumGrayColor"
+            >
+              <div class="px-4 py-4 text-white">Types</div>
+            </div>
+          </div>
+          <div class="px-4 pb-8 pt-4 text-white text-xs">
+            <p
+              v-if="getElement === null || getElement === undefined"
+              class="text-xs pb-2"
+            ></p>
+            <p
+              v-if="getElement !== null && getElement !== undefined"
+              class="text-xs pb-2"
+            >
+              <span>Element type: </span>
+              <span>
+                {{ typeof getElement }}
+              </span>
+            </p>
+
+            <p
+              v-if="getComponent === null || getComponent === undefined"
+              class="text-xs pb-2"
+            >
+              <span>Component type: </span>
+              {{ JSON.stringify(getComponent) }}
+            </p>
+            <p
+              v-if="getComponent !== null && getComponent !== undefined"
+              class="text-xs pb-2"
+            >
+              <span>Component type: </span>
+              <span>
+                {{
+                  Array.isArray(getComponent) === true
+                    ? 'array'
+                    : typeof getComponent
+                }}
+              </span>
+            </p>
+            <p class="text-xs pb-2">
+              <span>Components: </span>
+              <span>
+                {{
+                  Array.isArray(getComponents) === true
+                    ? 'array'
+                    : typeof getComponents
+                }}
+              </span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <!-- Types - end -->
+      <!-- Code Block Component - start-->
+      <div>
+        <h4 class="myPrimaryParagraph text-sm pb-2">Content</h4>
+        <div class="overflow-hidden bg-gray-900 max-w-2xl">
+          <div class="flex bg-gray-800/40 ring-1 ring-white/5">
+            <div
+              class="-mb-px flex text-xs font-medium text-myPrimaryMediumGrayColor"
+            >
+              <div
+                @click="updateCurrentTab('element')"
+                class="px-4 py-4 cursor-pointer"
+                :class="[current === 'element' ? 'text-white' : '']"
+              >
+                Element
+              </div>
+              <div
+                @click="updateCurrentTab('component')"
+                class="px-4 py-4 cursor-pointer"
+                :class="[current === 'component' ? 'text-white' : '']"
+              >
+                Component
+              </div>
+              <div
+                @click="updateCurrentTab('components')"
+                class="px-4 py-4 cursor-pointer"
+                :class="[current === 'components' ? 'text-white' : '']"
+              >
+                Components
+                {{ Array.isArray(getComponents) && getComponents.length }}
+              </div>
+            </div>
+          </div>
+          <div class="px-4 pb-8 pt-4 text-white text-xs break-all">
+            <div v-if="current === 'element'">
+              <div v-if="getElement">
+                <div
+                  class="flex flex-col gap-4 border-b border-white mb-4 pb-4"
+                >
+                  <p>Selected element outerHTML:</p>
+                  <p class="whitespace-pre-line leading-5">
+                    {{ getElement?.outerHTML }}
+                  </p>
+                </div>
+                <div
+                  class="flex flex-col gap-2 mt-4 border-b border-white mb-4 pb-4"
+                >
+                  <p>Selected element src:</p>
+                  <p class="whitespace-pre-line leading-5">
+                    {{
+                      getElement?.src ? getElement?.src : typeof getElement?.src
+                    }}
+                  </p>
+                </div>
+                <div
+                  class="flex flex-col gap-2 mt-4 border-b border-white mb-4 pb-4"
+                >
+                  <p>Selected element href:</p>
+                  <p class="whitespace-pre-line leading-5">
+                    {{
+                      getElement?.href
+                        ? getElement?.href
+                        : typeof getElement?.href
+                    }}
+                  </p>
+                </div>
+                <div
+                  class="flex flex-col gap-2 mt-4 border-b border-white mb-4 pb-4"
+                >
+                  <p>Selected element class:</p>
+                  <p class="whitespace-pre-line leading-5">
+                    {{
+                      getElement?.classList
+                        ? getElement?.classList
+                        : typeof getElement?.classList
+                    }}
+                  </p>
+                </div>
+                <div class="flex flex-col gap-2 mt-4">
+                  <p>Selected element style:</p>
+                  <p class="whitespace-pre-line leading-5">
+                    {{
+                      getElement?.style
+                        ? JSON.stringify(getElement?.style)
+                        : typeof getElement?.style
+                    }}
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div v-if="current === 'component'">
+              <div v-if="!getComponent">
+                <p class="pb-2">
+                  {{ getComponent === null ? 'NULL' : typeof getComponent }}
+                </p>
+              </div>
+              <div v-if="getComponent">
+                <p class="pb-2">
+                  Component ID:
+                  {{ getComponent?.id }}
+                </p>
+                <p class="whitespace-pre-line leading-5 mt-4">
+                  Component HTML:<br />
+                  {{ getComponent?.html_code }}
+                </p>
+              </div>
+            </div>
+            <div v-if="current === 'components'">
+              <div v-if="!getComponents">
+                <p class="pb-2">
+                  {{ getComponents === null ? 'NULL' : typeof getComponents }}
+                </p>
+              </div>
+              <div v-if="getComponents">
+                <div
+                  class="border-b border-white mb-4 pb-4 last:border-none"
+                  v-for="component in getComponents"
+                  :key="component.id"
+                >
+                  <p class="pb-2">
+                    Component ID:
+                    {{ component.id }}
+                  </p>
+
+                  <p class="whitespace-pre-line leading-5 mt-4">
+                    Component HTML:<br />
+                    {{ component.html_code }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Code Block Component - end-->
+    </div>
+  </div>
+</template>