@myissue/vue-website-page-builder 3.4.20 → 3.4.22

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

@@ -1,123 +0,0 @@
-<script setup>
-import { ref, computed, watch } from 'vue'
-import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
-import tailwindColors from '../../../../utils/builder/tailwaind-colors'
-import { sharedPageBuilderStore } from '../../../../stores/shared-store'
-import { getPageBuilder } from '../../../../composables/builderInstance'
-import { useTranslations } from '../../../../composables/useTranslations'
-
-const { translate } = useTranslations()
-
-const pageBuilderService = getPageBuilder()
-
-// Use shared store instance
-const pageBuilderStateStore = sharedPageBuilderStore
-
-defineProps({
-  globalPageLayout: {
-    Type: Boolean,
-  },
-})
-
-const textColor = ref(null)
-const getTextColor = computed(() => {
-  return pageBuilderStateStore.getTextColor
-})
-
-watch(
-  getTextColor,
-  async (newValue) => {
-    textColor.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-</script>
-
-<template>
-  <Listbox as="div" v-model="textColor">
-    <div class="pbx-relative">
-      <div
-        :class="[
-          globalPageLayout
-            ? 'pbx-flex pbx-flex-col pbx-border-solid pbx-border pbx-border-gray-400'
-            : 'pbx-flex pbx-gap-2 pbx-items-center',
-        ]"
-      >
-        <ListboxButton
-          v-if="globalPageLayout"
-          class="pbx-flex pbx-flex-row pbx-justify-between pbx-items-center pbx-pl-3 pbx-pr-3 pbx-py-5 pbx-cursor-pointer pbx-duration-200 hover:pbx-bg-myPrimaryLightGrayColor pbx-bg-white hover:pbx-text-black pbx-text-black pbx-font-sans pbx-font-medium pbx-border-0"
-        >
-          <div class="pbx-flex pbx-justify-start pbx-items-center pbx-gap-2">
-            <div
-              class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border pbx-border-gray-600 pbx-rounded-sm pbx-bg-none pbx-border-solid"
-              :class="`pbx-bg-${textColor?.replace('pbx-text-', '')}`"
-            ></div>
-            <div>
-              <div>{{ translate('Text Color') }}</div>
-            </div>
-          </div>
-
-          <span v-if="globalPageLayout" class="material-symbols-outlined"> chevron_right </span>
-        </ListboxButton>
-
-        <ListboxButton
-          v-if="!globalPageLayout"
-          class="pbx-h-8 pbx-w-8 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
-        >
-          <div class="pbx-flex pbx-flex-col">
-            <div class="pbx-flex pbx-gap-2 pbx-items-center">
-              <span
-                class="material-symbols-outlined"
-                style="text-shadow: rgb(0 0 0 / 10%) 1.5px 1.5px 0px"
-                :class="`pbx-text-${textColor?.replace('pbx-text-', '')}`"
-              >
-                format_color_text
-              </span>
-            </div>
-          </div>
-        </ListboxButton>
-      </div>
-
-      <transition
-        leave-active-class="pbx-transition pbx-ease-in pbx-duration-100"
-        leave-from-class="pbx-opacity-100"
-        leave-to-class="pbx-opacity-0"
-      >
-        <ListboxOptions
-          class="pbx-headless-dropdown pbx-absolute pbx-min-w-[12rem] pbx-z-40 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-gray-50 pbx-py-1 pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm"
-        >
-          <ListboxOption
-            as="template"
-            v-for="color in tailwindColors.textColorVariables"
-            @click="pageBuilderService.handleTextColor(textColor)"
-            :key="color"
-            :value="color"
-            v-slot="{ active, textColor }"
-          >
-            <li
-              :class="[
-                active
-                  ? 'pbx-bg-myPrimaryLinkColor pbx-text-white'
-                  : 'pbx-text-myPrimaryDarkGrayColor',
-                'pbx-relative pbx-cursor-default pbx-select-none pbx-py-2 pbx-pl-3 pbx-pr-9',
-              ]"
-            >
-              <div v-if="color === 'none'" class="pbx-flex pbx-items-center">
-                <span class="material-symbols-outlined"> invert_colors </span>
-                <span class="pbx-ml-3">Default black</span>
-              </div>
-              <div v-if="color !== 'none'" class="pbx-flex pbx-items-center">
-                <div
-                  class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border-solid pbx-border pbx-border-gray-100 pbx-rounded-sm"
-                  :class="`pbx-bg-${color.replace('pbx-text-', '')}`"
-                ></div>
-                <span class="pbx-ml-3">{{ color }}</span>
-              </div>
-            </li>
-          </ListboxOption>
-        </ListboxOptions>
-      </transition>
-    </div>
-  </Listbox>
-</template>

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

@@ -1,237 +0,0 @@
-<script setup>
-import { ref, computed, watch } from 'vue'
-import EditorAccordion from '../EditorAccordion.vue'
-import tailwindFontSizes from '../../../../utils/builder/tailwind-font-sizes'
-import tailwindFontStyles from '../../../../utils/builder/tailwind-font-styles'
-import { sharedPageBuilderStore } from '../../../../stores/shared-store'
-import { getPageBuilder } from '../../../../composables/builderInstance'
-
-import { useTranslations } from '../../../../composables/useTranslations'
-
-const { translate } = useTranslations()
-const pageBuilderService = getPageBuilder()
-
-// Use shared store instance
-const pageBuilderStateStore = sharedPageBuilderStore
-
-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,
-  async (newValue) => {
-    fontBase.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-watch(
-  getFontDesktop,
-  async (newValue) => {
-    fontDesktop.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-watch(
-  getFontTablet,
-  async (newValue) => {
-    fontTablet.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-watch(
-  getFontMobile,
-  async (newValue) => {
-    fontMobile.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-watch(
-  getFontWeight,
-  async (newValue) => {
-    fontWeight.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-watch(
-  getFontFamily,
-  async (newValue) => {
-    fontFamily.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-watch(
-  getFontStyle,
-  async (newValue) => {
-    fontStyle.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-</script>
-
-<template>
-  <EditorAccordion>
-    <template #title>{{ translate('Typographies') }}</template>
-    <template #content>
-      <!-- FONT SIZES -->
-      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">
-        {{ translate('Font Appearance') }}
-      </p>
-      <template v-if="false">
-        <div class="pbx-my-2 pbx-py-2">
-          <label for="font-base" class="pbx-myPrimaryInputLabel">
-            {{ translate('Font Size') }}
-          </label>
-          <select
-            id="font-base"
-            v-model="fontBase"
-            class="pbx-myPrimarySelect"
-            @change="pageBuilderService.handleFontSizeBase(fontBase)"
-          >
-            <option disabled value="">{{ translate('Select') }}</option>
-            <option v-for="fontSize in tailwindFontSizes.fontBase" :key="fontSize">
-              {{ fontSize }}
-            </option>
-          </select>
-        </div>
-      </template>
-      <div class="pbx-my-2 pbx-py-2">
-        <label for="font-desktop" class="pbx-myPrimaryInputLabel">
-          {{ translate('Font size') }}
-        </label>
-        <select
-          id="font-desktop"
-          v-model="fontDesktop"
-          class="pbx-myPrimarySelect"
-          @change="pageBuilderService.handleFontSizeDesktop(fontDesktop)"
-        >
-          <option disabled value="">{{ translate('Select') }}</option>
-          <option v-for="fontSize in tailwindFontSizes.fontDesktop" :key="fontSize">
-            {{ fontSize }}
-          </option>
-        </select>
-      </div>
-      <template v-if="false">
-        <div class="pbx-my-2 pbx-py-2">
-          <label for="font-tablet" class="pbx-myPrimaryInputLabel">
-            {{ translate('Font tablet size') }}
-          </label>
-          <select
-            id="font-tablet"
-            v-model="fontTablet"
-            class="pbx-myPrimarySelect"
-            @change="pageBuilderService.handleFontSizeTablet(fontTablet)"
-          >
-            <option disabled value="">{{ translate('Select') }}</option>
-            <option v-for="fontSize in tailwindFontSizes.fontTablet" :key="fontSize">
-              {{ fontSize }}
-            </option>
-          </select>
-        </div>
-        <div class="pbx-my-2 pbx-py-2">
-          <label for="font-mobile" class="pbx-myPrimaryInputLabel">
-            {{ translate('Font small screens') }}
-          </label>
-          <select
-            id="font-mobile"
-            v-model="fontMobile"
-            class="pbx-myPrimarySelect"
-            @change="pageBuilderService.handleFontSizeMobile(fontMobile)"
-          >
-            <option disabled value="">{{ translate('Select') }}</option>
-            <option v-for="fontSize in tailwindFontSizes.fontMobile" :key="fontSize">
-              {{ fontSize }}
-            </option>
-          </select>
-        </div>
-      </template>
-      <hr />
-
-      <div class="pbx-my-2 pbx-py-2">
-        <label for="font-weight" class="pbx-myPrimaryInputLabel">
-          {{ translate('Font weight') }}
-        </label>
-        <select
-          id="font-weight"
-          v-model="fontWeight"
-          class="pbx-myPrimarySelect"
-          @change="pageBuilderService.handleFontWeight(fontWeight)"
-        >
-          <option disabled value="">{{ translate('Select') }}</option>
-          <option v-for="fontWeight in tailwindFontStyles.fontWeight" :key="fontWeight">
-            {{ fontWeight }}
-          </option>
-        </select>
-      </div>
-      <hr />
-
-      <!-- FONT FAMILY -->
-      <div class="pbx-my-2 pbx-py-2">
-        <label for="font-family" class="pbx-myPrimaryInputLabel">
-          {{ translate('Font family') }}
-        </label>
-        <select
-          id="font-family"
-          v-model="fontFamily"
-          class="pbx-myPrimarySelect"
-          @change="pageBuilderService.handleFontFamily(fontFamily)"
-        >
-          <option disabled value="">{{ translate('Select') }}</option>
-          <option v-for="fontFamily in tailwindFontStyles.fontFamily" :key="fontFamily">
-            {{ fontFamily }}
-          </option>
-        </select>
-      </div>
-      <hr />
-
-      <div class="pbx-my-2 pbx-py-2">
-        <label for="font-style" class="pbx-myPrimaryInputLabel">
-          {{ translate('Font Style') }}
-        </label>
-        <select
-          id="font-style"
-          v-model="fontStyle"
-          class="pbx-myPrimarySelect"
-          @change="pageBuilderService.handleFontStyle(fontStyle)"
-        >
-          <option disabled value="">{{ translate('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

@@ -1,46 +0,0 @@
-<template>
-  <div
-    class="pbx-flex pbx-flex-col pbx-border-solid pbx-border pbx-border-gray-400"
-    :class="{ '': expanded }"
-  >
-    <div
-      class="pbx-flex pbx-flex-row pbx-justify-between pbx-items-center pbx-pl-3 pbx-pr-3 pbx-py-5 pbx-cursor-pointer pbx-duration-200 pbx-bg-white hover:pbx-bg-myPrimaryLightGrayColor pbx-select-none"
-      @click="expanded = !expanded"
-    >
-      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-my-0 pbx-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
-          ? 'pbx-block pbx-bg-indigo-50 pbx-border-0 pbx-border-solid pbx-border-t pbx-border-red-50'
-          : 'pbx-hidden',
-      ]"
-      class="pbx-px-4 pbx-ease-linear pbx-duration-75 pbx-pb-8"
-    >
-      <slot name="content" />
-    </div>
-  </div>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    const expanded = ref(false)
-
-    return {
-      expanded,
-    }
-  },
-}
-</script>