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

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

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

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

@@ -1,106 +0,0 @@
-<script setup>
-import { ref, computed, watch } from 'vue'
-import tailwindOpacities from '../../../../utils/builder/tailwind-opacities'
-import {
-  Listbox,
-  ListboxButton,
-  ListboxLabel,
-  ListboxOption,
-  ListboxOptions,
-} from '@headlessui/vue'
-import { sharedPageBuilderStore } from '../../../../stores/shared-store'
-import { getPageBuilder } from '../../../../composables/builderInstance'
-const pageBuilderService = getPageBuilder()
-
-// Use shared store instance
-const pageBuilderStateStore = sharedPageBuilderStore
-const opacityVueModel = ref(null)
-const getOpacity = computed(() => {
-  return pageBuilderStateStore.getOpacity
-})
-
-watch(
-  getOpacity,
-  async (newValue) => {
-    opacityVueModel.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-</script>
-
-<template>
-  <div class="pbx-my-2 pbx-py-2">
-    <label for="default-opacity" class="pbx-myPrimaryInputLabel"> Opacity</label>
-
-    <Listbox as="div" v-model="opacityVueModel">
-      <div class="pbx-relative">
-        <ListboxButton class="pbx-myPrimarySelect" id="default-opacity">
-          <span class="pbx-flex pbx-items-center pbx-gap-2">
-            <div v-if="opacityVueModel === 'none'">
-              <div class="pbx-myPrimaryColorPreview pbx-border-none">
-                <span class="material-symbols-outlined"> ev_shadow </span>
-              </div>
-            </div>
-
-            <div
-              v-if="opacityVueModel !== 'none'"
-              class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-bg-gray-950"
-              :class="`${opacityVueModel}`"
-            ></div>
-
-            <span class="pbx-block pbx-truncate" :class="[opacityVueModel !== 'none' ? '' : '']">{{
-              opacityVueModel === 'none' ? 'Transparent' : opacityVueModel
-            }}</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="elementOpacity in tailwindOpacities.opacities"
-              @click="pageBuilderService.handleOpacity(elementOpacity)"
-              :key="elementOpacity"
-              :value="elementOpacity"
-              v-slot="{ active }"
-            >
-              <li
-                :class="[
-                  active
-                    ? 'pbx-bg-myPrimaryLinkColor 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="elementOpacity === 'none'">
-                    <div class="pbx-myPrimaryColorPreview pbx-border-none">
-                      <span class="material-symbols-outlined"> ev_shadow </span>
-                    </div>
-                  </div>
-
-                  <div
-                    v-if="elementOpacity !== 'none'"
-                    class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-bg-gray-950"
-                    :class="`${elementOpacity}`"
-                  ></div>
-                  <span v-if="elementOpacity === 'none'" class="pbx-ml-3">Transparent</span>
-                  <span v-if="elementOpacity !== 'none'" class="pbx-ml-3">{{
-                    elementOpacity
-                  }}</span>
-                </div>
-              </li>
-            </ListboxOption>
-          </ListboxOptions>
-        </transition>
-      </div>
-    </Listbox>
-  </div>
-</template>

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

@@ -1,116 +0,0 @@
-<script setup>
-import { ref, computed, watch } from 'vue'
-import { sharedPageBuilderStore } from '../../../../stores/shared-store'
-import EditorAccordion from '../EditorAccordion.vue'
-import tailwindPaddingPlusMargin from '../../../../utils/builder/tailwind-padding-margin'
-import { getPageBuilder } from '../../../../composables/builderInstance'
-import { useTranslations } from '../../../../composables/useTranslations'
-
-const { translate } = useTranslations()
-const pageBuilderService = getPageBuilder()
-
-// Use shared store instance
-const pageBuilderStateStore = sharedPageBuilderStore
-
-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,
-  async (newValue) => {
-    fontVerticalPadding.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-watch(
-  getFontHorizontalPadding,
-  async (newValue) => {
-    fontHorizontalPadding.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-watch(
-  getFontVerticalMargin,
-  async (newValue) => {
-    fontVerticalMargin.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-watch(
-  getFontHorizontalMargin,
-  async (newValue) => {
-    fontHorizontalMargin.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-</script>
-<template>
-  <EditorAccordion>
-    <template #title>{{ translate('Margin') }}</template>
-    <template #content>
-      <div class="pbx-my-2 pbx-py-2">
-        <div class="pbx-pt-4 pbx-pb-2 pbx-mb-4">
-          <p class="pbx-myPrimaryInputLabel pbx-font-medium pbx-italic">
-            {{ translate('Large Screens Only') }}
-          </p>
-          <hr />
-        </div>
-        <label for="vertical-margin" class="pbx-myPrimaryInputLabel">{{
-          translate('Vertical Margin')
-        }}</label>
-        <select
-          id="vertical-margin"
-          v-model="fontVerticalMargin"
-          class="pbx-myPrimarySelect"
-          @change="pageBuilderService.handleVerticalMargin(fontVerticalMargin)"
-        >
-          <option disabled value="">{{ translate('Select') }}</option>
-          <option
-            v-for="verticalMargin in tailwindPaddingPlusMargin.verticalMargin"
-            :key="verticalMargin"
-          >
-            {{ verticalMargin }}
-          </option>
-        </select>
-      </div>
-      <hr />
-      <div class="pbx-my-2 pbx-py-2">
-        <label for="horizontal-margin" class="pbx-myPrimaryInputLabel">{{
-          translate('Horizontal Margin')
-        }}</label>
-        <select
-          id="horizontal-margin"
-          v-model="fontHorizontalMargin"
-          class="pbx-myPrimarySelect"
-          @change="pageBuilderService.handleHorizontalMargin(fontHorizontalMargin)"
-        >
-          <option disabled value="">{{ translate('Select') }}</option>
-          <option
-            v-for="horizontalMargin in tailwindPaddingPlusMargin.horizontalMargin"
-            :key="horizontalMargin"
-          >
-            {{ horizontalMargin }}
-          </option>
-        </select>
-      </div>
-    </template>
-  </EditorAccordion>
-</template>

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

@@ -1,19 +0,0 @@
-<script setup>
-import EditorAccordion from '../EditorAccordion.vue'
-import ManageBackgroundOpacity from './ManageBackgroundOpacity.vue'
-import ManageOpacity from './ManageOpacity.vue'
-import { useTranslations } from '../../../../composables/useTranslations'
-
-const { translate } = useTranslations()
-</script>
-
-<template>
-  <EditorAccordion>
-    <template #title>{{ translate('Opacity & Transparency') }}</template>
-    <template #content>
-      <ManageOpacity></ManageOpacity>
-      <hr />
-      <ManageBackgroundOpacity></ManageBackgroundOpacity>
-    </template>
-  </EditorAccordion>
-</template>

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

@@ -1,117 +0,0 @@
-<script setup>
-import { ref, computed, watch } from 'vue'
-import { sharedPageBuilderStore } from '../../../../stores/shared-store'
-import EditorAccordion from '../EditorAccordion.vue'
-import tailwindPaddingPlusMargin from '../../../../utils/builder/tailwind-padding-margin'
-import { getPageBuilder } from '../../../../composables/builderInstance'
-import { useTranslations } from '../../../../composables/useTranslations'
-
-const { translate } = useTranslations()
-
-const pageBuilderService = getPageBuilder()
-
-// Use shared store instance
-const pageBuilderStateStore = sharedPageBuilderStore
-
-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,
-  async (newValue) => {
-    fontVerticalPadding.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-watch(
-  getFontHorizontalPadding,
-  async (newValue) => {
-    fontHorizontalPadding.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-watch(
-  getFontVerticalMargin,
-  async (newValue) => {
-    fontVerticalMargin.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-watch(
-  getFontHorizontalMargin,
-  async (newValue) => {
-    fontHorizontalMargin.value = newValue
-    await pageBuilderService.initializeElementStyles()
-  },
-  { immediate: true },
-)
-</script>
-<template>
-  <EditorAccordion>
-    <template #title>{{ translate('Padding') }}</template>
-    <template #content>
-      <div class="pbx-my-2 pbx-py-2">
-        <div class="pbx-pt-4 pbx-pb-2 pbx-mb-4">
-          <p class="pbx-myPrimaryInputLabel pbx-font-medium pbx-italic">
-            {{ translate('Large Screens Only') }}
-          </p>
-          <hr />
-        </div>
-        <label for="vertical-padding" class="pbx-myPrimaryInputLabel">{{
-          translate('Vertical Padding')
-        }}</label>
-        <select
-          id="vertical-padding"
-          v-model="fontVerticalPadding"
-          class="pbx-myPrimarySelect"
-          @change="pageBuilderService.handleVerticalPadding(fontVerticalPadding)"
-        >
-          <option disabled value="">{{ translate('Select') }}</option>
-          <option
-            v-for="verticalPadding in tailwindPaddingPlusMargin.verticalPadding"
-            :key="verticalPadding"
-          >
-            {{ verticalPadding }}
-          </option>
-        </select>
-      </div>
-      <hr />
-      <div class="pbx-my-2 pbx-py-2">
-        <label for="horizontal-padding" class="pbx-myPrimaryInputLabel">{{
-          translate('Horizontal Padding')
-        }}</label>
-        <select
-          id="horizontal-padding"
-          v-model="fontHorizontalPadding"
-          class="pbx-myPrimarySelect"
-          @change="pageBuilderService.handleHorizontalPadding(fontHorizontalPadding)"
-        >
-          <option disabled value="">{{ translate('Select') }}</option>
-          <option
-            v-for="horizontalPadding in tailwindPaddingPlusMargin.horizontalPadding"
-            :key="horizontalPadding"
-          >
-            {{ horizontalPadding }}
-          </option>
-        </select>
-      </div>
-    </template>
-  </EditorAccordion>
-</template>

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

@@ -1,123 +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 currentStyles = ref(null)
-const getCurrentStyles = computed(() => pageBuilderStateStore.getCurrentStyles)
-
-watch(
-  getCurrentStyles,
-  (newValue) => {
-    currentStyles.value = newValue
-  },
-  { immediate: true },
-)
-
-const inputProperty = ref('')
-const inputValue = ref('')
-const errorMessage = ref('')
-const valueInputRef = ref(null)
-
-const handleEnterOnProperty = () => {
-  if (valueInputRef.value) {
-    valueInputRef.value.focus()
-  }
-}
-
-const handleAddStyle = async () => {
-  const property = inputProperty.value.trim()
-  const value = inputValue.value.trim()
-
-  if (!property || !value) {
-    errorMessage.value = 'Please enter a property and a value.'
-    return
-  }
-
-  if (currentStyles.value && currentStyles.value[property]) {
-    errorMessage.value = `Property "${property}" already exists. Remove it first to add a new one.`
-    return
-  }
-
-  errorMessage.value = '' // Clear error
-
-  pageBuilderService.handleAddStyle(property, value)
-  await pageBuilderService.initializeElementStyles()
-
-  inputProperty.value = ''
-  inputValue.value = ''
-}
-</script>
-
-<template>
-  <EditorAccordion>
-    <template #title>{{ translate('Inline Styles') }}</template>
-    <template #content>
-      <p class="pbx-myPrimaryInputLabel pbx-my-4">
-        {{
-          translate(
-            'These are the inline styles applied by the builder. Add your own styles and press Enter to apply them 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="(value, key) in currentStyles"
-          :key="key"
-          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.handleRemoveStyle(key)
-              await pageBuilderService.initializeElementStyles()
-            }
-          "
-        >
-          <div class="pbx-flex pbx-items-center pbx-gap-1">
-            <span class="pbx-mr-1"> {{ key }}: {{ value }}; </span>
-          </div>
-        </div>
-      </div>
-
-      <hr />
-      <div class="pbx-my-2 pbx-py-2">
-        <label for="custom-style-property" class="pbx-myPrimaryInputLabel">
-          {{ translate('Add your own style.') }}
-        </label>
-        <div class="pbx-flex pbx-gap-2 pbx-flex-col pbx-item-center">
-          <input
-            id="custom-style-property"
-            v-model="inputProperty"
-            type="text"
-            :placeholder="translate('property')"
-            @keydown.enter.prevent="handleEnterOnProperty"
-            autocomplete="off"
-            class="pbx-myPrimaryInput"
-          />
-          <input
-            id="custom-style-value"
-            ref="valueInputRef"
-            v-model="inputValue"
-            type="text"
-            :placeholder="translate('value')"
-            @keydown.enter="handleAddStyle"
-            autocomplete="off"
-            class="pbx-myPrimaryInput"
-          />
-
-          <button @click="handleAddStyle" type="button" class="pbx-myPrimaryButton">
-            {{ translate('Add') }}
-          </button>
-        </div>
-      </div>
-      <p v-if="errorMessage" class="pbx-myPrimaryInputError">{{ errorMessage }}</p>
-    </template>
-  </EditorAccordion>
-</template>