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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (89) hide show
  1. package/README.md +22 -24
  2. package/dist/vue-website-page-builder.js +1 -1
  3. package/dist/vue-website-page-builder.umd.cjs +1 -1
  4. package/package.json +2 -3
  5. package/src/App.vue +0 -28
  6. package/src/Components/Homepage/Footer.vue +0 -32
  7. package/src/Components/Homepage/Navbar.vue +0 -25
  8. package/src/Components/Layouts/FullWidthElement.vue +0 -34
  9. package/src/Components/Loaders/GlobalLoader.vue +0 -18
  10. package/src/Components/Modals/BuilderComponents.vue +0 -53
  11. package/src/Components/Modals/DynamicModalBuilder.vue +0 -209
  12. package/src/Components/Modals/MediaLibraryModal.vue +0 -61
  13. package/src/Components/Modals/ModalBuilder.vue +0 -117
  14. package/src/Components/PageBuilder/EditorMenu/Editables/BackgroundColorEditor.vue +0 -121
  15. package/src/Components/PageBuilder/EditorMenu/Editables/BorderRadius.vue +0 -188
  16. package/src/Components/PageBuilder/EditorMenu/Editables/Borders.vue +0 -176
  17. package/src/Components/PageBuilder/EditorMenu/Editables/ClassEditor.vue +0 -112
  18. package/src/Components/PageBuilder/EditorMenu/Editables/ComponentTopMenu.vue +0 -108
  19. package/src/Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue +0 -541
  20. package/src/Components/PageBuilder/EditorMenu/Editables/HTMLEditor.vue +0 -203
  21. package/src/Components/PageBuilder/EditorMenu/Editables/ImageEditor.vue +0 -96
  22. package/src/Components/PageBuilder/EditorMenu/Editables/LinkEditor.vue +0 -315
  23. package/src/Components/PageBuilder/EditorMenu/Editables/ManageBackgroundOpacity.vue +0 -107
  24. package/src/Components/PageBuilder/EditorMenu/Editables/ManageOpacity.vue +0 -106
  25. package/src/Components/PageBuilder/EditorMenu/Editables/Margin.vue +0 -116
  26. package/src/Components/PageBuilder/EditorMenu/Editables/OpacityEditor.vue +0 -19
  27. package/src/Components/PageBuilder/EditorMenu/Editables/Padding.vue +0 -117
  28. package/src/Components/PageBuilder/EditorMenu/Editables/StyleEditor.vue +0 -123
  29. package/src/Components/PageBuilder/EditorMenu/Editables/TextColorEditor.vue +0 -123
  30. package/src/Components/PageBuilder/EditorMenu/Editables/Typography.vue +0 -237
  31. package/src/Components/PageBuilder/EditorMenu/EditorAccordion.vue +0 -46
  32. package/src/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue +0 -368
  33. package/src/Components/PageBuilder/Settings/AdvancedPageBuilderSettings.vue +0 -476
  34. package/src/Components/PageBuilder/Settings/PageBuilderSettings.vue +0 -581
  35. package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue +0 -248
  36. package/src/Components/PageBuilder/UndoRedo/UndoRedo.vue +0 -90
  37. package/src/Components/TipTap/TipTap.vue +0 -25
  38. package/src/Components/TipTap/TipTapInput.vue +0 -341
  39. package/src/PageBuilder/PageBuilder.vue +0 -1025
  40. package/src/PageBuilder/Preview.vue +0 -64
  41. package/src/composables/builderInstance.ts +0 -47
  42. package/src/composables/delay.ts +0 -5
  43. package/src/composables/extractCleanHTMLFromPageBuilder.ts +0 -59
  44. package/src/composables/preloadImage.ts +0 -8
  45. package/src/composables/useDebounce.ts +0 -8
  46. package/src/composables/usePageBuilderModal.ts +0 -25
  47. package/src/composables/useTranslations.ts +0 -28
  48. package/src/css/dev-global.css +0 -24
  49. package/src/css/style.css +0 -600
  50. package/src/helpers/isEmptyObject.ts +0 -5
  51. package/src/index.ts +0 -28
  52. package/src/locales/ar.json +0 -170
  53. package/src/locales/de.json +0 -171
  54. package/src/locales/en.json +0 -171
  55. package/src/locales/es.json +0 -171
  56. package/src/locales/fr.json +0 -171
  57. package/src/locales/hi.json +0 -172
  58. package/src/locales/ja.json +0 -171
  59. package/src/locales/pt.json +0 -171
  60. package/src/locales/ru.json +0 -171
  61. package/src/locales/zh-Hans.json +0 -171
  62. package/src/main.ts +0 -14
  63. package/src/plugin.ts +0 -16
  64. package/src/services/LocalStorageManager.ts +0 -25
  65. package/src/services/PageBuilderService.ts +0 -3191
  66. package/src/stores/page-builder-state.ts +0 -498
  67. package/src/stores/shared-store.ts +0 -13
  68. package/src/tailwind-safelist.html +0 -3
  69. package/src/tests/DefaultComponents/DefaultBuilderComponents.vue +0 -284
  70. package/src/tests/DefaultComponents/DefaultMediaLibraryComponent.vue +0 -10
  71. package/src/tests/PageBuilderTest.vue +0 -82
  72. package/src/tests/TestComponents/DemoBuilderComponentsTest.vue +0 -5
  73. package/src/tests/TestComponents/DemoMediaLibraryComponentTest.vue +0 -8
  74. package/src/tests/TestComponents/DemoUnsplash.vue +0 -389
  75. package/src/tests/componentsArray.test.json +0 -62
  76. package/src/tests/pageBuilderService.test.ts +0 -165
  77. package/src/types/global.d.ts +0 -11
  78. package/src/types/index.ts +0 -306
  79. package/src/utils/builder/html-doc-declaration-with-components.ts +0 -7
  80. package/src/utils/builder/tailwaind-colors.ts +0 -503
  81. package/src/utils/builder/tailwind-border-radius.ts +0 -67
  82. package/src/utils/builder/tailwind-border-style-width-color.ts +0 -272
  83. package/src/utils/builder/tailwind-font-sizes.ts +0 -75
  84. package/src/utils/builder/tailwind-font-styles.ts +0 -56
  85. package/src/utils/builder/tailwind-opacities.ts +0 -45
  86. package/src/utils/builder/tailwind-padding-margin.ts +0 -159
  87. package/src/utils/html-elements/component.ts +0 -485
  88. package/src/utils/html-elements/componentHelpers.ts +0 -98
  89. package/src/utils/html-elements/themes.ts +0 -85
package/src/PageBuilder/Preview.vue DELETED
@@ -1,64 +0,0 @@
1
- <script setup>
2
- import { ref, watchEffect } from 'vue'
3
-
4
- const props = defineProps({
5
- mobile: {
6
- type: Boolean,
7
- },
8
- })
9
-
10
- const htmlPage = ref('')
11
- const iframeRef = ref(null)
12
-
13
- const previewData = localStorage.getItem('preview')
14
-
15
- if (previewData) {
16
- try {
17
- const parsed = JSON.parse(previewData)
18
- htmlPage.value = Array.isArray(parsed) ? parsed.join('') : ''
19
- } catch (err) {
20
- console.error('Invalid preview data:', err)
21
- htmlPage.value = ''
22
- }
23
- }
24
-
25
- watchEffect(() => {
26
- if (props.mobile && iframeRef.value && htmlPage.value) {
27
- const iframe = iframeRef.value
28
- const doc = iframe.contentWindow.document
29
- doc.open()
30
- doc.write(
31
- `<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body><div id="pagebuilder" class="pbx-font-sans pbx-text-black">${htmlPage.value}</div></body></html>`,
32
- )
33
- doc.close()
34
-
35
- // Copy stylesheets
36
- document.querySelectorAll('link[rel="stylesheet"], style').forEach((node) => {
37
- doc.head.appendChild(node.cloneNode(true))
38
- })
39
- }
40
- })
41
- </script>
42
-
43
- <template>
44
- <template v-if="!mobile">
45
- <div>
46
- <div
47
- class="pbx-text-black pbx-w-full pbx-inset-x-0 pbx-h-[90vh] pbx-bg-white pbx-overflow-x-scroll lg:pbx-pt-2 pbx-pt-2"
48
- >
49
- <div id="pagebuilder">
50
- <div class="" v-html="htmlPage"></div>
51
- </div>
52
- </div>
53
- </div>
54
- </template>
55
- <template v-if="mobile">
56
- <div>
57
- <iframe
58
- ref="iframeRef"
59
- class="pbx-mx-auto pbx-w-full pbx-bg-white pbx-shadow-lg pbx-h-[80vh] pbx-border-0"
60
- src="about:blank"
61
- ></iframe>
62
- </div>
63
- </template>
64
- </template>
package/src/composables/builderInstance.ts DELETED
@@ -1,47 +0,0 @@
1
- /**
2
- * @file This file manages the singleton instance of the PageBuilderService.
3
- * This pattern ensures that there is only one instance of the service throughout the application,
4
- * providing a single source of truth for the page builder's state and logic.
5
- * @author Qais Wardag
6
- */
7
-
8
- import { PageBuilderService } from '../services/PageBuilderService'
9
-
10
- /**
11
- * The singleton instance of the PageBuilderService.
12
- * It is initialized to null and will be set by the `setBuilderInstance` function.
13
- * @type {PageBuilderService | null}
14
- */
15
- let instance: PageBuilderService | null = null
16
-
17
- /**
18
- * Sets the singleton instance of the PageBuilderService.
19
- * This function is called by the Vue plugin to initialize the service.
20
- * It ensures that the instance is only set once.
21
- *
22
- * @param {PageBuilderService} newInstance - The new instance of the PageBuilderService to set.
23
- * @returns {void}
24
- */
25
- export function setBuilderInstance(newInstance: PageBuilderService): void {
26
- if (!instance) {
27
- instance = newInstance
28
- }
29
- }
30
-
31
- /**
32
- * Retrieves the singleton instance of the PageBuilderService.
33
- * This function is used throughout the application to access the service.
34
- * It throws an error if the service has not been initialized, ensuring that
35
- * the plugin has been correctly installed.
36
- *
37
- * @throws {Error} If the PageBuilderService has not been initialized.
38
- * @returns {PageBuilderService} The singleton instance of the PageBuilderService.
39
- */
40
- export function getPageBuilder(): PageBuilderService {
41
- if (!instance) {
42
- throw new Error(
43
- 'PageBuilder has not been initialized. Please call app.use(pageBuilder) in your main application file.',
44
- )
45
- }
46
- return instance
47
- }
package/src/composables/delay.ts DELETED
@@ -1,5 +0,0 @@
1
- export const delay = function delay(ms: number = 200): Promise<void> {
2
- return new Promise((resolve) => {
3
- setTimeout(resolve, ms)
4
- })
5
- }
package/src/composables/extractCleanHTMLFromPageBuilder.ts DELETED
@@ -1,59 +0,0 @@
1
- import type { PageBuilderConfig } from '../types'
2
-
3
- export function extractCleanHTMLFromPageBuilder(
4
- pagebuilder: HTMLElement | null,
5
- config?: PageBuilderConfig,
6
- ): string {
7
- if (!pagebuilder) {
8
- console.warn('No valid pagebuilder element passed')
9
- return ''
10
- }
11
-
12
- const clone = pagebuilder.cloneNode(true) as HTMLElement
13
- clone.removeAttribute('id')
14
-
15
- // Remove custom attributes
16
- const elementsWithAttrs = clone.querySelectorAll<HTMLElement>(
17
- '[data-componentid], [data-component-title], #page-builder-editor-editable-area',
18
- )
19
-
20
- elementsWithAttrs.forEach((el) => {
21
- el.removeAttribute('data-componentid')
22
- el.removeAttribute('data-component-title')
23
- if (el.id === 'page-builder-editor-editable-area') {
24
- el.removeAttribute('id')
25
- }
26
- })
27
-
28
- if (config && config && typeof config.imageUrlPrefix === 'string') {
29
- const imageUrlPrefix = config.imageUrlPrefix
30
- const imgs = clone.querySelectorAll<HTMLImageElement>('img')
31
- imgs.forEach((img) => {
32
- const src = img.getAttribute('src') || ''
33
- if (
34
- !src.startsWith('http') &&
35
- // extra safety
36
- imageUrlPrefix &&
37
- !src.startsWith(imageUrlPrefix)
38
- ) {
39
- img.setAttribute('src', imageUrlPrefix + src.replace(/^\/+/, ''))
40
- }
41
- })
42
- }
43
-
44
- // Recursively remove all comment nodes
45
- const removeComments = (node: Node): void => {
46
- for (let i = node.childNodes.length - 1; i >= 0; i--) {
47
- const child = node.childNodes[i]
48
- if (child.nodeType === Node.COMMENT_NODE) {
49
- node.removeChild(child)
50
- } else if (child.nodeType === Node.ELEMENT_NODE) {
51
- removeComments(child)
52
- }
53
- }
54
- }
55
-
56
- removeComments(clone)
57
-
58
- return clone.outerHTML
59
- }
package/src/composables/preloadImage.ts DELETED
@@ -1,8 +0,0 @@
1
- export function preloadImage(url: string) {
2
- return new Promise((resolve, reject) => {
3
- const img = new window.Image()
4
- img.onload = resolve
5
- img.onerror = reject
6
- img.src = url
7
- })
8
- }
package/src/composables/useDebounce.ts DELETED
@@ -1,8 +0,0 @@
1
- let timer: ReturnType<typeof setTimeout> | null = null
2
-
3
- export function useDebounce() {
4
- return (fn: () => void, delay = 300) => {
5
- if (timer) clearTimeout(timer)
6
- timer = setTimeout(fn, delay)
7
- }
8
- }
package/src/composables/usePageBuilderModal.ts DELETED
@@ -1,25 +0,0 @@
1
- import { inject } from 'vue'
2
-
3
- // Composable for managing PageBuilder modals
4
- export function usePageBuilderModal() {
5
- // Get the close function provided by the PageBuilder component
6
- const closeAddComponentModal = inject<(() => void) | null>('closeAddComponentModal', null)
7
- const closeMediaLibraryModal = inject<(() => void) | null>('closeMediaLibraryModal', null)
8
-
9
- return {
10
- closeAddComponentModal:
11
- closeAddComponentModal ||
12
- (() => {
13
- console.warn(
14
- 'closeAddComponentModal function not available. Make sure you are using this within a PageBuilder context.',
15
- )
16
- }),
17
- closeMediaLibraryModal:
18
- closeMediaLibraryModal ||
19
- (() => {
20
- console.warn(
21
- 'closeMediaLibraryModal function not available. Make sure you are using this within a MediaLibraryModal context.',
22
- )
23
- }),
24
- }
25
- }
package/src/composables/useTranslations.ts DELETED
@@ -1,28 +0,0 @@
1
- import { ref, readonly } from 'vue'
2
- import type { Ref } from 'vue'
3
-
4
- const translations: Ref<Record<string, string>> = ref({})
5
-
6
- async function loadTranslations(language: string) {
7
- try {
8
- const localeModule = await import(`../locales/${language}.json`)
9
- translations.value = localeModule.default
10
- } catch (error) {
11
- console.error(`Could not load translations for language: ${language}`, error)
12
- if (language !== 'en') {
13
- await loadTranslations('en')
14
- }
15
- }
16
- }
17
-
18
- export function useTranslations() {
19
- function translate(key: string): string {
20
- return translations.value[key] || key
21
- }
22
-
23
- return {
24
- translate,
25
- loadTranslations,
26
- currentTranslations: readonly(translations),
27
- }
28
- }
package/src/css/dev-global.css DELETED
@@ -1,24 +0,0 @@
1
- /* Tailwind’s base layer includes global CSS resets and element styles that are not prefixed.
2
- These styles affect all HTML elements (like input, button, h1, etc.) in the consuming app. */
3
- @tailwind base;
4
-
5
- .mobile-preview-frame {
6
- container-type: inline-size;
7
- }
8
-
9
- /* popover start */
10
- .popup-fade-enter-active,
11
- .popup-fade-leave-active {
12
- transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
13
- }
14
- .popup-fade-enter-from,
15
- .popup-fade-leave-to {
16
- transform: scale(0.95);
17
- opacity: 0;
18
- }
19
- .popup-fade-enter-to,
20
- .popup-fade-leave-from {
21
- transform: scale(1);
22
- opacity: 1;
23
- }
24
- /* popover end */