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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.4.20",
+  "version": "3.4.21",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",
@@ -15,7 +15,6 @@
     "!dist/*.ico",
     "!dist/browserconfig.xml",
     "!dist/robots.txt",
-    "src",
     "README.md",
     "LICENSE"
   ],
@@ -64,7 +63,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" --",
+    "build": "run-p type-check \"build-only { @}\" --",
     "build:lib": "vue-tsc --declaration --emitDeclarationOnly --outDir dist && vite build --mode lib",
     "preview": "vite preview",
     "build-only": "vite build",

package/src/App.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { onMounted, computed } from 'vue'
-import Navbar from './Components/Homepage/Navbar.vue'
-import PageBuilderTest from './tests/PageBuilderTest.vue'
-import Footer from './Components/Homepage/Footer.vue'
-import { useTranslations } from './composables/useTranslations'
-import { sharedPageBuilderStore } from './stores/shared-store'
-
-const { loadTranslations } = useTranslations()
-
-const pageBuilderStateStore = sharedPageBuilderStore
-
-const getCurrentLanguage = computed(() => {
-  return pageBuilderStateStore.getCurrentLanguage
-})
-
-onMounted(async () => {
-  const language = getCurrentLanguage.value || 'en'
-  await loadTranslations(language)
-})
-</script>
-
-<template>
-  <div>
-    <Footer></Footer>
-    <PageBuilderTest></PageBuilderTest>
-  </div>
-</template>

package/src/Components/Homepage/Footer.vue

@@ -1,32 +0,0 @@
-<script setup>
-const version = __APP_VERSION__
-</script>
-
-<template>
-  <div
-    class="pbx-flex pbx-justify-between pbx-gap-2 lg:pbx-px-12 pbx-mx-2 pbx-py-3 pbx-border-t pbx-border-t-gray-900"
-  >
-    <p class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-medium pbx-underline">
-      <a
-        href="https://www.npmjs.com/package/@myissue/vue-website-page-builder"
-        target="_blank"
-        class="pbx-myPrimaryLink pbx-text-myPrimaryDarkGrayColor"
-      >
-        Install via npm
-      </a>
-    </p>
-
-    <p class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-medium pbx-underline">
-      <a
-        href="https://github.com/myissue-org/vue-website-page-builder"
-        target="_blank"
-        class="pbx-myPrimaryLink pbx-text-myPrimaryDarkGrayColor"
-      >
-        View on GitHub
-      </a>
-    </p>
-    <p class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-medium pbx-underline">
-      <span class="pbx-text-myPrimaryDarkGrayColor">{{ version }}</span>
-    </p>
-  </div>
-</template>

package/src/Components/Homepage/Navbar.vue

@@ -1,25 +0,0 @@
-<script setup>
-const emit = defineEmits(['handleButton'])
-
-// first button function
-const handleButton = function () {
-  emit('handleButton')
-}
-</script>
-
-<template>
-  <nav
-    class="pbx-px-6 pbx-py-6 pbx-mx-auto pbx-flex pbx-items-center pbx-justify-between pbx-bg-gray-50 lg:pbx-h-[10vh] pbx-h-[10vh]"
-    aria-label="Global"
-  >
-    <img class="pbx-h-6" src="/logo/logo.svg" alt="Logo" />
-
-    <div class="pbx-flex lg:pbx-gap-x-12 pbx-myPrimaryGap">
-      <div
-        class="pbx-text-lg pbx-font-medium pbx-text-myPrimaryDarkGrayColor pbx-flex pbx-gap-2 pbx-items-center"
-      >
-        Page Builder
-      </div>
-    </div>
-  </nav>
-</template>

package/src/Components/Layouts/FullWidthElement.vue

@@ -1,34 +0,0 @@
-<script setup>
-defineProps({
-  descriptionArea: {
-    Type: Boolean,
-    required: true,
-    default: true,
-  },
-  headerArea: {
-    Type: Boolean,
-    default: true,
-  },
-})
-</script>
-
-<template>
-  <!-- chimp start -->
-  <div class="pbx-myPrimaryWidthScreenModule">
-    <template v-if="headerArea">
-      <div class="pbx-myPrimaryContentSection">
-        <h2 class="pbx-mySecondaryHeader">
-          <slot name="title" />
-        </h2>
-        <template v-if="descriptionArea === true">
-          <p class="pbx-myPrimaryParagraph pbx-font-normal">
-            <slot name="description" />
-          </p>
-        </template>
-      </div>
-    </template>
-    <div class="pbx-myPrimaryContentSection">
-      <slot name="content" />
-    </div>
-  </div>
-</template>

package/src/Components/Loaders/GlobalLoader.vue

@@ -1,18 +0,0 @@
-<template>
-  <div
-    class="pbx-bg-white pbx-flex pbx-justify-center pbx-items-center min-pbx-h-screen pbx-h-screen pbx-w-screen pbx-fixed pbx-inset-0 pbx-z-[10000]"
-  >
-    <div class="pbx-absolute pbx-top-1/3">
-      <div class="pbx-flex pbx-items-center pbx-justify-center pbx-mt-4">
-        <div
-          class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
-        >
-          <span
-            class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"
-            >Loading...</span
-          >
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

package/src/Components/Modals/BuilderComponents.vue

@@ -1,53 +0,0 @@
-<script setup>
-import ModalBuilder from '../Modals/ModalBuilder.vue'
-import DefaultBuilderComponents from '../../tests/DefaultComponents/DefaultBuilderComponents.vue'
-import { inject } from 'vue'
-const customMediaComponent = inject('CustomMediaComponent')
-
-defineProps({
-  firstButtonText: {
-    required: true,
-  },
-  title: {
-    required: true,
-  },
-  show: {
-    type: Boolean,
-    default: false,
-    required: true,
-  },
-  CustomBuilderComponents: {
-    type: Object,
-    default: null,
-  },
-})
-const emit = defineEmits(['firstModalButtonSearchComponentsFunction'])
-
-// first button function
-const firstButtonBuilder = function () {
-  emit('firstModalButtonSearchComponentsFunction')
-}
-</script>
-
-<template>
-  <ModalBuilder
-    :title="title"
-    maxWidth="6xl"
-    :showModalBuilder="show"
-    @closeMainModalBuilder="firstButtonBuilder"
-    minHeight=""
-    maxHeight=""
-  >
-    <div class="pbx-w-full pbx-inset-x-0 pbx-bg-white pbx-overflow-x-auto lg:pbx-pt-2 pbx-pt-2">
-      <div>
-        <!-- Only show custom search component if provided -->
-        <div v-if="CustomBuilderComponents">
-          <component :is="CustomBuilderComponents" />
-        </div>
-        <div v-else>
-          <DefaultBuilderComponents :customMediaComponent="customMediaComponent" />
-        </div>
-      </div>
-    </div>
-  </ModalBuilder>
-</template>

package/src/Components/Modals/DynamicModalBuilder.vue

@@ -1,209 +0,0 @@
-<script setup>
-import ModalBuilder from './ModalBuilder.vue'
-
-defineProps({
-  showDynamicModalBuilder: {
-    type: Boolean,
-    default: false,
-    required: true,
-  },
-  simpleModal: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-  disabledWhichButton: {
-    type: String,
-    default: '',
-    required: false,
-  },
-  maxWidth: {
-    type: String,
-    required: false,
-    default: '2xl',
-  },
-  gridColumnAmount: {
-    type: Number,
-    required: true,
-  },
-  type: {
-    type: String,
-    required: true,
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    required: true,
-  },
-  firstButtonText: {
-    type: String,
-  },
-  secondButtonText: {
-    type: String,
-  },
-  thirdButtonText: {
-    type: String,
-  },
-})
-
-const emit = defineEmits([
-  'firstModalButtonFunctionDynamicModalBuilder',
-  'secondModalButtonFunctionDynamicModalBuilder',
-  'thirdModalButtonFunctionDynamicModalBuilder',
-])
-
-// first button function
-const firstButtonBuilder = function () {
-  emit('firstModalButtonFunctionDynamicModalBuilder')
-}
-// second button  function
-const secondButtonBuilder = function () {
-  emit('secondModalButtonFunctionDynamicModalBuilder')
-}
-
-// third button function
-const thirdButtonBuilder = function () {
-  emit('thirdModalButtonFunctionDynamicModalBuilder')
-}
-</script>
-
-<template>
-  <ModalBuilder
-    :title="title"
-    :showModalBuilder="showDynamicModalBuilder"
-    :type="type"
-    @closeMainModalBuilder="firstButtonBuilder"
-    :maxWidth="maxWidth"
-  >
-    <slot name="content" />
-
-    <div
-      class="pbx-min-h-32 pbx-h-max pbx-font-sans pbx-w-full pbx-relative pbx-inline-block pbx-align-bottom pbx-text-left pbx-overflow-hidden pbx-transform pbx-transition-all sm:pbx-align-middle"
-    >
-      <div :class="{ 'pbx-pr-4 pbx-pb-4': !simpleModal }">
-        <template v-if="simpleModal !== true">
-          <div v-html="description" class="pbx-myPrimaryParagraph pbx-mb-6"></div>
-        </template>
-
-        <slot name="header"></slot>
-
-        <slot></slot>
-      </div>
-    </div>
-
-    <div
-      class="pbx-border-0 pbx-border-solid pbx-border-t pbx-border-gray-200 pbx-mt-4 pbx-flex pbx-items-center pbx-justify-end"
-    >
-      <div
-        v-if="simpleModal !== true && !isLoading"
-        class="pbx-py-4 pbx-flex sm:pbx-justify-end pbx-justify-center"
-      >
-        <slot name="footer" />
-        <div
-          :class="{
-            'sm:pbx-grid-cols-1': gridColumnAmount === 1,
-            'sm:pbx-grid-cols-2': gridColumnAmount === 2,
-            'sm:pbx-grid-cols-3': gridColumnAmount === 3,
-          }"
-          class="sm:pbx-items-end sm:pbx-justify-end pbx-flex sm:pbx-flex-row pbx-flex-col pbx-myPrimaryGap sm:pbx-w-5/6 pbx-w-full"
-        >
-          <button
-            v-if="firstButtonText"
-            ref="firstButtonRef"
-            class="pbx-mySecondaryButton"
-            type="button"
-            @click="firstButtonBuilder"
-          >
-            {{ firstButtonText }}
-          </button>
-
-          <button
-            v-if="secondButtonText"
-            class="pbx-myPrimaryButton pbx-bg-yellow-300 hover:pbx-bg-yellow-400 pbx-text-myPrimaryDarkGrayColor hover:pbx-text-myPrimaryDarkGrayColor focus:pbx-ring-yellow-400 pbx-w-full"
-            type="button"
-            @click="secondButtonBuilder"
-          >
-            {{ secondButtonText }}
-          </button>
-
-          <button
-            v-if="thirdButtonText"
-            class="pbx-myPrimaryButton pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-myPrimaryLinkColor focus:pbx-ring-myPrimaryLinkColor hover:pbx-bg-myPrimaryLinkColor pbx-w-full"
-            :class="[
-              type === 'danger' || type === 'delete'
-                ? 'pbx-bg-red-600 focus-visible:pbx-ring-red-600 focus:pbx-ring-red-600 hover:pbx-bg-red-600'
-                : 'pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-myPrimaryLinkColor focus:pbx-ring-myPrimaryLinkColor hover:pbx-bg-myPrimaryLinkColor',
-            ]"
-            type="button"
-            @click="thirdButtonBuilder"
-          >
-            {{ thirdButtonText }}
-          </button>
-        </div>
-      </div>
-
-      <template v-if="isLoading">
-        <div class="pbx-flex pbx-items-center pbx-my-2 pbx-py-4 pbx-px-2 pbx-justify-end">
-          <div
-            class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
-          >
-            <span
-              class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"
-              >Loading...</span
-            >
-          </div>
-        </div>
-      </template>
-    </div>
-  </ModalBuilder>
-</template>
-
-<style scope>
-/*
-  Enter and leave animations can use different
-  durations and timing functions.
-*/
-.slide-fade-enter-active {
-  transition: all 0.3s ease-out;
-}
-
-.slide-fade-leave-active {
-  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
-}
-
-.slide-fade-enter-from,
-.slide-fade-leave-to {
-  transform: translateX(20px);
-  opacity: 0;
-}
-
-.bounce-enter-active {
-  animation: bounce-in 0.5s;
-}
-.bounce-leave-active {
-  animation: bounce-in 0.5s reverse;
-}
-@keyframes bounce-in {
-  0% {
-    transform: scale(0);
-  }
-  50% {
-    transform: scale(1.25);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-</style>

package/src/Components/Modals/MediaLibraryModal.vue

@@ -1,61 +0,0 @@
-<script setup>
-import { provide } from 'vue'
-import DefaultMediaLibraryComponent from '../../tests/DefaultComponents/DefaultMediaLibraryComponent.vue'
-import ModalBuilder from './ModalBuilder.vue'
-
-defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    required: true,
-  },
-  firstButtonText: {
-    type: String,
-  },
-  secondButtonText: {
-    type: String,
-  },
-  thirdButtonText: {
-    type: String,
-  },
-  open: {
-    required: true,
-  },
-  customMediaComponent: {
-    type: Object,
-    default: null,
-  },
-})
-
-const emit = defineEmits(['firstMediaButtonFunction'])
-
-// first button function
-const firstButton = function () {
-  emit('firstMediaButtonFunction')
-}
-
-// Provide close function for custom components
-const closeMediaLibraryModal = () => {
-  firstButton()
-}
-provide('closeMediaLibraryModal', closeMediaLibraryModal)
-</script>
-
-<template>
-  <ModalBuilder
-    :title="title"
-    :showModalBuilder="open"
-    @closeMainModalBuilder="firstButton"
-    maxWidth="6xl"
-  >
-    <!-- Show only custom media component if provided -->
-    <div v-if="customMediaComponent" class="pbx-w-full">
-      <component :is="customMediaComponent" />
-    </div>
-    <div v-else>
-      <DefaultMediaLibraryComponent />
-    </div>
-  </ModalBuilder>
-</template>

package/src/Components/Modals/ModalBuilder.vue

@@ -1,117 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  showModalBuilder: {
-    type: Boolean,
-    default: false,
-  },
-  type: {
-    type: String,
-    default: 'success',
-  },
-  maxWidth: {
-    type: String,
-    default: '2xl',
-  },
-  minHeight: {
-    type: String,
-  },
-  maxHeight: {
-    type: String,
-  },
-  noBackgroundOpacity: {
-    type: Boolean,
-  },
-})
-
-const emit = defineEmits(['closeMainModalBuilder'])
-
-const handleClose = () => {
-  emit('closeMainModalBuilder')
-}
-
-const maxWidthClass = computed(() => {
-  return {
-    sm: 'lg:pbx-max-w-sm',
-    md: 'lg:pbx-max-w-md',
-    lg: 'lg:pbx-max-w-lg',
-    xl: 'lg:pbx-max-w-xl',
-    '2xl': 'lg:pbx-max-w-2xl',
-    '3xl': 'lg:pbx-max-w-3xl',
-    '4xl': 'lg:pbx-max-w-4xl',
-    '5xl': 'lg:pbx-max-w-5xl',
-    '6xl': 'lg:pbx-max-w-6xl',
-    '7xl': 'lg:pbx-max-w-7xl',
-    full: 'lg:pbx-max-w-full', // 100% width
-    screen: 'lg:w-screen sm:pbx-max-w-none', // truly full screen
-  }[props.maxWidth]
-})
-</script>
-
-<template>
-  <teleport to="body">
-    <div class="pbx-font-sans">
-      <!-- Modal -->
-      <div
-        v-if="showModalBuilder"
-        class="pbx-fixed pbx-inset-0 pbx-z-40 pbx-flex pbx-items-center pbx-justify-center pbx-mx-4"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="dialog-title"
-      >
-        <!-- Backdrop -->
-        <div
-          class="pbx-fixed pbx-inset-0 pbx-bg-black/50 pbx-transition-opacity"
-          :class="[noBackgroundOpacity ? 'pbx-bg-black/100' : '']"
-          @click="handleClose"
-        ></div>
-
-        <div
-          class="pbx-relative pbx-inline-block pbx-bg-white pbx-rounded-xl pbx-text-left pbx-shadow-xl pbx-transform pbx-transition-all pbx-max-w-[96vh] lg:pbx-max-h-[98vh] pbx-max-h-[85vh] pbx-overflow-y-auto pbx-w-full"
-          :class="[
-            maxWidthClass ? maxWidthClass : '',
-            minHeight ? minHeight : '',
-            maxHeight ? maxHeight : '',
-          ]"
-        >
-          <div
-            class="pbx-h-16 pbx-px-4 pbx-border-0 pbx-border-solid pbx-border-b pbx-border-gray-200 pbx-mb-2 pbx-flex pbx-items-center pbx-justify-between"
-            :class="[
-              type === 'success' ? 'pbx-bg-white' : '',
-              type === 'warning' ? 'pbx-bg-white' : '',
-              type === 'danger' ? 'pbx-bg-white' : '',
-              type === 'delete' ? 'pbx-bg-white' : '',
-            ]"
-          >
-            <h3
-              as="h3"
-              class="pbx-myQuaternaryHeader pbx-my-0 pbx-py-0"
-              :class="[
-                type === 'success' ? 'pbx-text-black' : '',
-                type === 'warning' ? 'pbx-text-black' : '',
-                type === 'danger' ? 'pbx-text-black' : '',
-                type === 'delete' ? 'pbx-text-black' : '',
-              ]"
-            >
-              {{ title }}
-            </h3>
-            <div
-              class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0 pbx-text-black"
-              @click="handleClose"
-            >
-              <span class="material-symbols-outlined"> close </span>
-            </div>
-          </div>
-          <div class="pbx-px-4 pbx-min-h-32">
-            <slot></slot>
-          </div>
-        </div>
-      </div>
-    </div>
-  </teleport>
-</template>