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

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

@@ -1,121 +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 backgroundColor = ref(null)
-const getBackgroundColor = computed(() => {
-  return pageBuilderStateStore.getBackgroundColor
-})
-
-watch(
-  getBackgroundColor,
-  async (newValue) => {
-    backgroundColor.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-</script>
-
-<template>
-  <Listbox as="div" v-model="backgroundColor">
-    <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-${backgroundColor?.replace('pbx-bg-', '')}`"
-            ></div>
-            <div>{{ translate('Background Color') }}</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-${backgroundColor?.replace('pbx-bg-', '')}`"
-              >
-                format_color_fill
-              </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.backgroundColorVariables"
-            @click="pageBuilderService.handleBackgroundColor(backgroundColor)"
-            :key="color"
-            :value="color"
-            v-slot="{ active, backgroundColor }"
-          >
-            <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"> ev_shadow </span>
-                <span class="pbx-ml-3">{{ translate('Transparent') }}</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-bg-', '')}`"
-                ></div>
-                <span class="pbx-ml-3">{{ color }}</span>
-              </div>
-            </li>
-          </ListboxOption>
-        </ListboxOptions>
-      </transition>
-    </div>
-  </Listbox>
-</template>

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

@@ -1,188 +0,0 @@
-<script setup>
-import { ref, computed, watch } from 'vue'
-import { sharedPageBuilderStore } from '../../../../stores/shared-store'
-import EditorAccordion from '../EditorAccordion.vue'
-import tailwindBorderRadius from '../../../../utils/builder/tailwind-border-radius'
-import { getPageBuilder } from '../../../../composables/builderInstance'
-import { useTranslations } from '../../../../composables/useTranslations'
-
-const { translate } = useTranslations()
-const pageBuilderService = getPageBuilder()
-
-const pageBuilderStateStore = sharedPageBuilderStore
-
-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,
-  async (newValue) => {
-    borderRadiusGlobal.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-watch(
-  getBorderRadiusTopLeft,
-  async (newValue) => {
-    borderRadiusTopLeft.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-watch(
-  getBorderRadiusTopRight,
-  async (newValue) => {
-    borderRadiusTopRight.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-watch(
-  getBorderRadiusBottomleft,
-  async (newValue) => {
-    borderRadiusBottomleft.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-watch(
-  getBorderRadiusBottomRight,
-  async (newValue) => {
-    borderRadiusBottomRight.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-</script>
-
-<template>
-  <EditorAccordion>
-    <template #title>{{ translate('Border Radius') }}</template>
-    <template #content>
-      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">
-        {{ translate('Global') }}
-      </p>
-      <div class="pbx-my-2 pbx-py-2">
-        <label for="global-border-radius" class="pbx-myPrimaryInputLabel">{{
-          translate('Border Radius')
-        }}</label>
-        <select
-          id="global-border-radius"
-          v-model="borderRadiusGlobal"
-          class="pbx-myPrimarySelect"
-          @change="pageBuilderService.handleBorderRadiusGlobal(borderRadiusGlobal)"
-        >
-          <option disabled value="">{{ translate('Select') }}</option>
-          <option
-            v-for="borderRadiusGlobal in tailwindBorderRadius.roundedGlobal"
-            :key="borderRadiusGlobal"
-          >
-            {{ borderRadiusGlobal }}
-          </option>
-        </select>
-      </div>
-      <hr />
-      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">
-        {{ translate('Specific') }}
-      </p>
-      <div class="pbx-my-2 pbx-py-2">
-        <label for="border-radius-top-left" class="pbx-myPrimaryInputLabel">
-          {{ translate('Border Radius top left') }}
-        </label>
-        <select
-          id="border-radius-top-left"
-          v-model="borderRadiusTopLeft"
-          class="pbx-myPrimarySelect"
-          @change="pageBuilderService.handleBorderRadiusTopLeft(borderRadiusTopLeft)"
-        >
-          <option disabled value="">{{ translate('Select') }}</option>
-          <option
-            v-for="borderRadiusTopLeft in tailwindBorderRadius.roundedTopLeft"
-            :key="borderRadiusTopLeft"
-          >
-            {{ borderRadiusTopLeft }}
-          </option>
-        </select>
-      </div>
-      <hr />
-      <div class="pbx-my-2 pbx-py-2">
-        <label for="border-radius-top-right" class="pbx-myPrimaryInputLabel">
-          {{ translate('Border Radius top right') }}
-        </label>
-        <select
-          id="border-radius-top-right"
-          v-model="borderRadiusTopRight"
-          class="pbx-myPrimarySelect"
-          @change="pageBuilderService.handleBorderRadiusTopRight(borderRadiusTopRight)"
-        >
-          <option disabled value="">{{ translate('Select') }}</option>
-          <option
-            v-for="borderRadiusTopRight in tailwindBorderRadius.roundedTopRight"
-            :key="borderRadiusTopRight"
-          >
-            {{ borderRadiusTopRight }}
-          </option>
-        </select>
-      </div>
-      <hr />
-      <div class="pbx-my-2 pbx-py-2">
-        <label for="border-radius-bottom-left" class="pbx-myPrimaryInputLabel">
-          {{ translate('Border Radius bottom left') }}
-        </label>
-        <select
-          id="border-radius-bottom-left"
-          v-model="borderRadiusBottomleft"
-          class="pbx-myPrimarySelect"
-          @change="pageBuilderService.handleBorderRadiusBottomleft(borderRadiusBottomleft)"
-        >
-          <option disabled value="">{{ translate('Select') }}</option>
-          <option
-            v-for="borderRadiusBottomleft in tailwindBorderRadius.roundedBottomLeft"
-            :key="borderRadiusBottomleft"
-          >
-            {{ borderRadiusBottomleft }}
-          </option>
-        </select>
-      </div>
-      <hr />
-      <div class="pbx-my-2 pbx-py-2">
-        <label for="border-radius-bottom-right" class="pbx-myPrimaryInputLabel">
-          {{ translate('Border Radius bottom right') }}
-        </label>
-        <select
-          id="border-radius-bottom-right"
-          v-model="borderRadiusBottomRight"
-          class="pbx-myPrimarySelect"
-          @change="pageBuilderService.handleBorderRadiusBottomRight(borderRadiusBottomRight)"
-        >
-          <option disabled value="">{{ translate('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

@@ -1,176 +0,0 @@
-<script setup>
-import { ref, computed, watch } from 'vue'
-import EditorAccordion from '../EditorAccordion.vue'
-import tailwindBorderStyleWidthPlusColor from '../../../../utils/builder/tailwind-border-style-width-color'
-import tailwindColors from '../../../../utils/builder/tailwaind-colors'
-import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
-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 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,
-  async (newValue) => {
-    borderStyle.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-watch(
-  getBorderWidth,
-  async (newValue) => {
-    borderWidth.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-watch(
-  getBorderColor,
-  async (newValue) => {
-    borderColor.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-</script>
-
-<template>
-  <EditorAccordion>
-    <template #title>{{ translate('Border Style, Width & Color') }}</template>
-    <template #content>
-      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">
-        {{ translate('Border') }}
-      </p>
-
-      <div class="pbx-my-2 pbx-py-2">
-        <label for="border-style" class="pbx-myPrimaryInputLabel">{{
-          translate('Border Style')
-        }}</label>
-        <select
-          id="border-style"
-          v-model="borderStyle"
-          class="pbx-myPrimarySelect"
-          @change="pageBuilderService.handleBorderStyle(borderStyle)"
-        >
-          <option disabled value="">{{ translate('Select') }}</option>
-          <option
-            v-for="borderStyle in tailwindBorderStyleWidthPlusColor.borderStyle"
-            :key="borderStyle"
-          >
-            {{ borderStyle }}
-          </option>
-        </select>
-      </div>
-      <hr />
-      <div class="pbx-my-2 pbx-py-2">
-        <label for="border-width" class="pbx-myPrimaryInputLabel">{{
-          translate('Border Width')
-        }}</label>
-        <select
-          id="border-width"
-          v-model="borderWidth"
-          class="pbx-myPrimarySelect"
-          @change="pageBuilderService.handleBorderWidth(borderWidth)"
-        >
-          <option disabled value="">{{ translate('Select') }}</option>
-          <option
-            v-for="borderWidth in tailwindBorderStyleWidthPlusColor.borderWidth"
-            :key="borderWidth"
-          >
-            {{ borderWidth }}
-          </option>
-        </select>
-      </div>
-      <hr />
-      <div class="pbx-my-2 pbx-py-2">
-        <label for="border-color" class="pbx-myPrimaryInputLabel">{{
-          translate('Border Color')
-        }}</label>
-        <Listbox as="div" v-model="borderColor">
-          <div class="pbx-relative pbx-mt-2">
-            <ListboxButton class="pbx-myPrimarySelect" id="border-color">
-              <span class="pbx-flex pbx-items-center pbx-gap-2">
-                <div v-if="getBorderColor === 'none'">
-                  <div class="pbx-myPrimaryColorPreview pbx-border-none">
-                    <span class="material-symbols-outlined"> ev_shadow </span>
-                  </div>
-                </div>
-                <div
-                  v-if="borderColor !== 'none'"
-                  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-${borderColor?.replace('pbx-border-', '')}`"
-                ></div>
-                <span class="pbx-block pbx-truncate">{{ borderColor }}</span>
-              </span>
-            </ListboxButton>
-
-            <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-absolute pbx-z-10 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-white pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm pbx-list-none pbx-p-0 pbx-m-0"
-              >
-                <ListboxOption
-                  as="template"
-                  v-for="color in tailwindBorderStyleWidthPlusColor.borderColor"
-                  @click="pageBuilderService.handleBorderColor(borderColor)"
-                  :key="color"
-                  :value="color"
-                  v-slot="{ active, borderColor }"
-                >
-                  <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 class="pbx-flex pbx-items-center">
-                      <div v-if="color === 'none'">
-                        <div class="pbx-myPrimaryColorPreview pbx-border-none">
-                          <span class="material-symbols-outlined"> ev_shadow </span>
-                        </div>
-                      </div>
-
-                      <div
-                        v-if="color !== 'none'"
-                        class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-bg-gray-950"
-                        :class="`pbx-bg-${color.replace('pbx-border-', '')}`"
-                      ></div>
-                      <span v-if="color === 'none'" class="pbx-ml-3">{{
-                        translate('Transparent')
-                      }}</span>
-                      <span v-if="color !== 'none'" class="pbx-ml-3">{{ color }}</span>
-                    </div>
-                  </li>
-                </ListboxOption>
-              </ListboxOptions>
-            </transition>
-          </div>
-        </Listbox>
-      </div>
-    </template>
-  </EditorAccordion>
-</template>

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

@@ -1,112 +0,0 @@
-<script setup>
-import { ref, computed, watch } from 'vue'
-import { sharedPageBuilderStore } from '../../../../stores/shared-store'
-import EditorAccordion from '../EditorAccordion.vue'
-import { getPageBuilder } from '../../../../composables/builderInstance'
-import { useTranslations } from '../../../../composables/useTranslations'
-
-const { translate } = useTranslations()
-
-const pageBuilderService = getPageBuilder()
-
-const pageBuilderStateStore = sharedPageBuilderStore
-
-const currentClasses = ref(null)
-const getCurrentClasses = computed(() => pageBuilderStateStore.getCurrentClasses)
-
-watch(
-  getCurrentClasses,
-  (newValue) => {
-    currentClasses.value = newValue
-  },
-  { immediate: true },
-)
-
-const inputClass = ref('')
-const errorMessage = ref('') // <-- error message reactive ref
-
-const handleAddClasses = async () => {
-  const classToAdd = inputClass.value.trim()
-
-  if (!classToAdd) {
-    errorMessage.value = 'Please enter a class name.'
-    return
-  }
-
-  // Add prefix if missing
-  const prefixedClass = classToAdd.startsWith('pbx-') ? classToAdd : 'pbx-' + classToAdd
-
-  // Check if class already exists
-  if (currentClasses.value?.includes(prefixedClass)) {
-    errorMessage.value = `Class "${prefixedClass}" is already added.`
-    return
-  }
-
-  errorMessage.value = '' // Clear error
-
-  pageBuilderService.handleAddClasses(classToAdd)
-  await pageBuilderService.initializeElementStyles()
-
-  inputClass.value = ''
-}
-</script>
-
-<template>
-  <EditorAccordion>
-    <template #title>{{ translate('Generated CSS') }}</template>
-    <template #content>
-      <p class="pbx-myPrimaryInputLabel pbx-my-4">
-        {{
-          translate(
-            'This is the CSS applied by the builder. Add your own CSS and press Enter to apply it to the selected element.',
-          )
-        }}
-      </p>
-
-      <div class="pbx-flex pbx-flex-row pbx-flex-wrap pbx-gap-2 pbx-mt-2 pbx-mb-4">
-        <div
-          v-for="className in currentClasses"
-          :key="className"
-          class="pbx-myPrimaryTag pbx-cursor-pointer hover:pbx-bg-myPrimaryErrorColor hover:pbx-text-white pbx-text-xs pbx-py-2 pbx-font-medium"
-          @click="
-            async () => {
-              pageBuilderService.handleRemoveClasses(className)
-              await pageBuilderService.initializeElementStyles()
-            }
-          "
-        >
-          <div class="pbx-flex pbx-items-center pbx-gap-1">
-            <span class="pbx-mr-1">
-              {{ className }}
-            </span>
-          </div>
-        </div>
-      </div>
-
-      <hr />
-      <div class="pbx-my-2 pbx-py-2">
-        <label for="custom-css" class="pbx-myPrimaryInputLabel">
-          {{ translate('Add your CSS.') }}
-          <br />
-          {{ translate('The pbx- prefix is added automatically.') }}
-        </label>
-        <div class="pbx-flex pbx-gap-2 pbx-item-center">
-          <input
-            id="custom-css"
-            v-model="inputClass"
-            type="text"
-            :placeholder="translate('Type class')"
-            @keydown.enter="handleAddClasses()"
-            autocomplete="off"
-            class="pbx-myPrimaryInput"
-          />
-
-          <button @click="handleAddClasses" type="button" class="pbx-myPrimaryButton">
-            {{ translate('Add') }}
-          </button>
-        </div>
-      </div>
-      <p v-if="errorMessage" class="pbx-myPrimaryInputError">{{ errorMessage }}</p>
-    </template>
-  </EditorAccordion>
-</template>