@myissue/vue-website-page-builder 3.3.98 → 3.3.99
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.
- package/README.md +45 -1
- package/dist/style.css +1 -1
- package/dist/vue-website-page-builder.js +12828 -12800
- package/dist/vue-website-page-builder.umd.cjs +84 -45
- package/package.json +1 -1
- package/src/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue +75 -6
- package/src/Components/PageBuilder/UndoRedo/UndoRedo.vue +27 -24
- package/src/PageBuilder/PageBuilder.vue +2 -2
- package/src/css/style.css +60 -26
package/package.json
CHANGED
|
@@ -73,13 +73,68 @@ function onScroll() {
|
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
-
// generate HTML
|
|
77
76
|
const generateHTML = function (filename, HTML) {
|
|
77
|
+
// Extract existing styles from the page
|
|
78
|
+
const existingStyles = Array.from(document.querySelectorAll('style, link[rel="stylesheet"]'))
|
|
79
|
+
.map((style) => {
|
|
80
|
+
if (style.tagName === 'STYLE') {
|
|
81
|
+
return style.outerHTML // Inline styles
|
|
82
|
+
} else if (style.tagName === 'LINK') {
|
|
83
|
+
return `<link rel="stylesheet" href="${style.href}">` // External stylesheets
|
|
84
|
+
}
|
|
85
|
+
return ''
|
|
86
|
+
})
|
|
87
|
+
.join('\n')
|
|
88
|
+
|
|
89
|
+
// Add your custom CSS
|
|
90
|
+
const customCSS = `
|
|
91
|
+
<style>
|
|
92
|
+
#pagebuilder blockquote,
|
|
93
|
+
#pagebuilder dl,
|
|
94
|
+
#pagebuilder dd,
|
|
95
|
+
#pagebuilder pre,
|
|
96
|
+
#pagebuilder hr,
|
|
97
|
+
#pagebuilder figure,
|
|
98
|
+
#pagebuilder p,
|
|
99
|
+
#pagebuilder h1,
|
|
100
|
+
#pagebuilder h2,
|
|
101
|
+
#pagebuilder h3,
|
|
102
|
+
#pagebuilder h4,
|
|
103
|
+
#pagebuilder h5,
|
|
104
|
+
#pagebuilder h6,
|
|
105
|
+
#pagebuilder ul,
|
|
106
|
+
#pagebuilder ol,
|
|
107
|
+
#pagebuilder li {
|
|
108
|
+
margin: 0;
|
|
109
|
+
padding: 0; /* Often useful for ul/ol too */
|
|
110
|
+
}
|
|
111
|
+
</style>
|
|
112
|
+
`
|
|
113
|
+
|
|
114
|
+
// Combine existing styles and custom CSS
|
|
115
|
+
const css = `${existingStyles}\n${customCSS}`
|
|
116
|
+
|
|
117
|
+
// Generate the full HTML
|
|
118
|
+
const fullHTML = `
|
|
119
|
+
<!DOCTYPE html>
|
|
120
|
+
<html lang="en">
|
|
121
|
+
<head>
|
|
122
|
+
<meta charset="UTF-8">
|
|
123
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
124
|
+
<title>Downloaded HTML</title>
|
|
125
|
+
${css}
|
|
126
|
+
</head>
|
|
127
|
+
<body>
|
|
128
|
+
<div id="pagebuilder" class="pbx-font-sans pbx-text-black">
|
|
129
|
+
${HTML}
|
|
130
|
+
</div>
|
|
131
|
+
</body>
|
|
132
|
+
</html>
|
|
133
|
+
`
|
|
134
|
+
|
|
135
|
+
// Create and trigger the download
|
|
78
136
|
const element = document.createElement('a')
|
|
79
|
-
element.setAttribute(
|
|
80
|
-
'href',
|
|
81
|
-
'data:text/html;charset=utf-8,' + encodeURIComponent(fullHTMLContent(HTML)),
|
|
82
|
-
)
|
|
137
|
+
element.setAttribute('href', 'data:text/html;charset=utf-8,' + encodeURIComponent(fullHTML))
|
|
83
138
|
element.setAttribute('download', filename)
|
|
84
139
|
|
|
85
140
|
element.style.display = 'none'
|
|
@@ -96,7 +151,21 @@ const handleDownloadHTML = function () {
|
|
|
96
151
|
return
|
|
97
152
|
}
|
|
98
153
|
|
|
99
|
-
|
|
154
|
+
// Extract clean HTML
|
|
155
|
+
let html = extractCleanHTMLFromPageBuilder(pagebuilder)
|
|
156
|
+
|
|
157
|
+
// Create a temporary DOM element to manipulate the HTML
|
|
158
|
+
const tempDiv = document.createElement('div')
|
|
159
|
+
tempDiv.innerHTML = html
|
|
160
|
+
|
|
161
|
+
// Remove 'hovered' and 'selected' attributes
|
|
162
|
+
tempDiv.querySelectorAll('[hovered], [selected]').forEach((el) => {
|
|
163
|
+
el.removeAttribute('hovered')
|
|
164
|
+
el.removeAttribute('selected')
|
|
165
|
+
})
|
|
166
|
+
|
|
167
|
+
// Get the cleaned HTML back
|
|
168
|
+
html = tempDiv.innerHTML
|
|
100
169
|
|
|
101
170
|
generateHTML('downloaded_html.html', html)
|
|
102
171
|
}
|
|
@@ -51,18 +51,20 @@ const handleRedo = async function () {
|
|
|
51
51
|
class="pbx-flex-1 pbx-flex pbx-justify-center pbx-items-center pbx-py-2 pbx-w-full gap-1"
|
|
52
52
|
>
|
|
53
53
|
<!-- Undo Start -->
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
54
|
+
|
|
55
|
+
<div
|
|
56
|
+
@click="handleUndo"
|
|
57
|
+
type="button"
|
|
58
|
+
class="pbx-h-10 pbx-w-10 pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square pbx-text-black hover:pbx-text-white"
|
|
59
|
+
:class="[
|
|
60
|
+
canUndo
|
|
61
|
+
? 'pbx-cursor-pointer hover:pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-0'
|
|
62
|
+
: 'pbx-cursor-not-allowed pbx-bg-opacity-20 hover:pbx-bg-gray-200',
|
|
63
|
+
]"
|
|
64
|
+
>
|
|
65
|
+
<span class="material-symbols-outlined"> undo </span>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
66
68
|
<!-- Undo End -->
|
|
67
69
|
<div
|
|
68
70
|
class="pbx-text-xs pbx-text-gray-600 pbx-mx-2 pbx-py-3 pbx-px-2 pbx-border-solid pbx-border pbx-border-gray-200 pbx-rounded-full"
|
|
@@ -70,18 +72,19 @@ const handleRedo = async function () {
|
|
|
70
72
|
{{ historyIndex + 1 }}/{{ historyLength }}
|
|
71
73
|
</div>
|
|
72
74
|
<!-- Redo Start -->
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
</
|
|
84
|
-
</
|
|
75
|
+
|
|
76
|
+
<div
|
|
77
|
+
@click="handleRedo"
|
|
78
|
+
class="pbx-h-10 pbx-w-10 pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square pbx-text-black hover:pbx-text-white"
|
|
79
|
+
:class="[
|
|
80
|
+
canRedo
|
|
81
|
+
? 'pbx-cursor-pointer hover:pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-0'
|
|
82
|
+
: 'pbx-cursor-not-allowed pbx-bg-opacity-20 hover:pbx-bg-gray-200',
|
|
83
|
+
]"
|
|
84
|
+
>
|
|
85
|
+
<span class="material-symbols-outlined"> redo </span>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
85
88
|
<!-- Redo End -->
|
|
86
89
|
</div>
|
|
87
90
|
</template>
|
|
@@ -879,11 +879,11 @@ onMounted(async () => {
|
|
|
879
879
|
|
|
880
880
|
<div id="pagebuilder" class="pbx-text-black pbx-font-sans">
|
|
881
881
|
<template v-for="component in getComponents" :key="component.id">
|
|
882
|
-
<
|
|
882
|
+
<div
|
|
883
883
|
v-if="component.html_code"
|
|
884
884
|
v-html="component.html_code"
|
|
885
885
|
@mouseup="handleSelectComponent(component)"
|
|
886
|
-
></
|
|
886
|
+
></div>
|
|
887
887
|
</template>
|
|
888
888
|
</div>
|
|
889
889
|
</main>
|
package/src/css/style.css
CHANGED
|
@@ -314,11 +314,8 @@
|
|
|
314
314
|
@apply pbx-my-0 pbx-block pbx-text-sm pbx-font-normal pbx-text-myPrimaryDarkGrayColor pbx-text-left pbx-mb-2;
|
|
315
315
|
}
|
|
316
316
|
|
|
317
|
-
.pbx-myPrimaryFormFocus {
|
|
318
|
-
@apply focus:pbx-ring-2 focus:pbx-ring-myPrimaryLinkColor focus:pbx-ring-offset-2 focus:pbx-border focus:pbx-border-gray-200;
|
|
319
|
-
}
|
|
320
317
|
.pbx-myPrimaryInput {
|
|
321
|
-
@apply pbx-block pbx-pr-8 pbx-text-left pbx-bg-white pbx-w-auto sm:pbx-text-sm pbx-font-normal pbx-text-myPrimaryDarkGrayColor placeholder:pbx-font-normal placeholder:pbx-accent-gray-300 focus:pbx-bg-white pbx-rounded-md pbx-py-3 pbx-px-3 pbx-border pbx-border-gray-300 pbx-shadow-sm focus:pbx-outline-none pbx-
|
|
318
|
+
@apply pbx-block pbx-pr-8 pbx-text-left pbx-bg-white pbx-w-auto sm:pbx-text-sm pbx-font-normal pbx-text-myPrimaryDarkGrayColor placeholder:pbx-font-normal placeholder:pbx-accent-gray-300 focus:pbx-bg-white pbx-rounded-md pbx-py-3 pbx-px-3 pbx-border pbx-border-gray-300 pbx-shadow-sm focus:pbx-outline-none pbx-h-full pbx-border-solid pbx-font-sans;
|
|
322
319
|
}
|
|
323
320
|
.pbx-myPrimaryInputNoBorder {
|
|
324
321
|
@apply pbx-myPrimaryInput placeholder:pbx-accent-gray-300 focus:pbx-bg-none pbx-rounded-md pbx-py-3 pbx-px-3 pbx-border-none focus:pbx-outline-none focus:pbx-ring-0 focus:pbx-ring-offset-0 focus:pbx-border-none pbx-shadow-none;
|
|
@@ -358,20 +355,6 @@
|
|
|
358
355
|
}
|
|
359
356
|
}
|
|
360
357
|
|
|
361
|
-
#page-builder-editor ol,
|
|
362
|
-
#page-builder-editor-editable-area ol,
|
|
363
|
-
#page-builder-editor ul,
|
|
364
|
-
#page-builder-editor-editable-area ul {
|
|
365
|
-
list-style: disc !important;
|
|
366
|
-
padding: 0 0 0 1rem;
|
|
367
|
-
}
|
|
368
|
-
|
|
369
|
-
#page-builder-editor li,
|
|
370
|
-
#page-builder-editor-editable-area li {
|
|
371
|
-
line-height: 1.2;
|
|
372
|
-
margin-left: 1em; /* Adjust this value as needed */
|
|
373
|
-
}
|
|
374
|
-
|
|
375
358
|
#pbxEditToolbar {
|
|
376
359
|
opacity: 0;
|
|
377
360
|
pointer-events: none;
|
|
@@ -471,14 +454,6 @@
|
|
|
471
454
|
font-weight: 500;
|
|
472
455
|
}
|
|
473
456
|
|
|
474
|
-
#page-builder-editor ol,
|
|
475
|
-
#pagebuilder ol,
|
|
476
|
-
#page-builder-editor ul,
|
|
477
|
-
#pagebuilder ul {
|
|
478
|
-
list-style: disc !important;
|
|
479
|
-
padding: 0rem;
|
|
480
|
-
}
|
|
481
|
-
|
|
482
457
|
.pbx-reorder-highlight {
|
|
483
458
|
animation: pbx-reorder-flash 0.4s ease-in-out;
|
|
484
459
|
}
|
|
@@ -500,3 +475,62 @@
|
|
|
500
475
|
|
|
501
476
|
.pbx-sibling-highlight {
|
|
502
477
|
}
|
|
478
|
+
|
|
479
|
+
.pbx-myPrimaryInput,
|
|
480
|
+
.pbx-myPrimarySelect {
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
.pbx-myPrimaryInput:focus,
|
|
484
|
+
.pbx-myPrimarySelect:focus {
|
|
485
|
+
--tw-ring-inset: inset;
|
|
486
|
+
--tw-ring-opacity: 1;
|
|
487
|
+
/* Use the hex color with opacity variable */
|
|
488
|
+
--tw-ring-color: rgba(22, 163, 74, var(--tw-ring-opacity, 1));
|
|
489
|
+
|
|
490
|
+
--tw-ring-shadow: 0 0 0 4px var(--tw-ring-color);
|
|
491
|
+
|
|
492
|
+
--tw-ring-offset-width: 2px;
|
|
493
|
+
--tw-ring-offset-color: white;
|
|
494
|
+
--tw-ring-offset-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
495
|
+
|
|
496
|
+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow);
|
|
497
|
+
border: 1px #dee6f0 solid;
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
#pagebuilder blockquote,
|
|
501
|
+
#pagebuilder dl,
|
|
502
|
+
#pagebuilder dd,
|
|
503
|
+
#pagebuilder pre,
|
|
504
|
+
#pagebuilder hr,
|
|
505
|
+
#pagebuilder figure,
|
|
506
|
+
#pagebuilder p,
|
|
507
|
+
#pagebuilder h1,
|
|
508
|
+
#pagebuilder h2,
|
|
509
|
+
#pagebuilder h3,
|
|
510
|
+
#pagebuilder h4,
|
|
511
|
+
#pagebuilder h5,
|
|
512
|
+
#pagebuilder h6,
|
|
513
|
+
#pagebuilder ul,
|
|
514
|
+
#pagebuilder ol,
|
|
515
|
+
#pagebuilder li {
|
|
516
|
+
margin: 0;
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
#page-builder-editor ol,
|
|
520
|
+
#pagebuilder ol,
|
|
521
|
+
#page-builder-editor ul,
|
|
522
|
+
#pagebuilder ul {
|
|
523
|
+
list-style: disc !important;
|
|
524
|
+
padding: 1rem 0 0 1rem;
|
|
525
|
+
margin-left: 1em;
|
|
526
|
+
line-height: 1.2;
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
#page-builder-editor ol,
|
|
530
|
+
#page-builder-editor-editable-area ol,
|
|
531
|
+
#page-builder-editor ul,
|
|
532
|
+
#page-builder-editor-editable-area ul {
|
|
533
|
+
list-style: disc !important;
|
|
534
|
+
padding: 1rem 0 0 1rem;
|
|
535
|
+
line-height: 1.2;
|
|
536
|
+
}
|