@myissue/vue-website-page-builder 3.4.4 → 3.4.6
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/dist/style.css +1 -1
- package/dist/vue-website-page-builder.js +24 -31
- package/dist/vue-website-page-builder.umd.cjs +7 -7
- package/package.json +1 -1
- package/src/Components/PageBuilder/EditorMenu/Editables/Borders.vue +0 -5
- package/src/Components/PageBuilder/EditorMenu/Editables/ManageBackgroundOpacity.vue +0 -5
- package/src/Components/PageBuilder/EditorMenu/Editables/ManageOpacity.vue +0 -5
- package/src/Components/PageBuilder/EditorMenu/EditorAccordion.vue +5 -1
- package/src/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue +1 -1
- package/src/Components/TipTap/TipTapInput.vue +1 -1
- package/src/PageBuilder/Preview.vue +2 -2
- package/src/css/style.css +75 -33
package/package.json
CHANGED
|
@@ -121,11 +121,6 @@ watch(
|
|
|
121
121
|
></div>
|
|
122
122
|
<span class="pbx-block pbx-truncate">{{ borderColor }}</span>
|
|
123
123
|
</span>
|
|
124
|
-
<span
|
|
125
|
-
class="pbx-pointer-events-none pbx-absolute pbx-inset-y-0 pbx-right-0 pbx-ml-3 pbx-flex pbx-items-center pbx-pr-2"
|
|
126
|
-
>
|
|
127
|
-
<span class="material-symbols-outlined"> keyboard_arrow_down </span>
|
|
128
|
-
</span>
|
|
129
124
|
</ListboxButton>
|
|
130
125
|
|
|
131
126
|
<transition
|
|
@@ -54,11 +54,6 @@ watch(
|
|
|
54
54
|
opacityVueModel === 'none' ? 'Transparent' : opacityVueModel
|
|
55
55
|
}}</span>
|
|
56
56
|
</span>
|
|
57
|
-
<span
|
|
58
|
-
class="pbx-pointer-events-none pbx-absolute pbx-inset-y-0 pbx-right-0 pbx-ml-3 pbx-flex pbx-items-center pbx-pr-2"
|
|
59
|
-
>
|
|
60
|
-
<span class="material-symbols-outlined"> keyboard_arrow_down </span>
|
|
61
|
-
</span>
|
|
62
57
|
</ListboxButton>
|
|
63
58
|
|
|
64
59
|
<transition
|
|
@@ -53,11 +53,6 @@ watch(
|
|
|
53
53
|
opacityVueModel === 'none' ? 'Transparent' : opacityVueModel
|
|
54
54
|
}}</span>
|
|
55
55
|
</span>
|
|
56
|
-
<span
|
|
57
|
-
class="pbx-pointer-events-none pbx-absolute pbx-inset-y-0 pbx-right-0 pbx-ml-3 pbx-flex pbx-items-center pbx-pr-2"
|
|
58
|
-
>
|
|
59
|
-
<span class="material-symbols-outlined"> keyboard_arrow_down </span>
|
|
60
|
-
</span>
|
|
61
56
|
</ListboxButton>
|
|
62
57
|
|
|
63
58
|
<transition
|
|
@@ -19,7 +19,11 @@
|
|
|
19
19
|
</template>
|
|
20
20
|
</div>
|
|
21
21
|
<div
|
|
22
|
-
:class="[
|
|
22
|
+
:class="[
|
|
23
|
+
expanded
|
|
24
|
+
? 'pbx-block pbx-bg-indigo-50 pbx-border-0 pbx-border-solid pbx-border-t pbx-border-red-50'
|
|
25
|
+
: 'pbx-hidden',
|
|
26
|
+
]"
|
|
23
27
|
class="pbx-px-4 pbx-ease-linear pbx-duration-75 pbx-pb-8"
|
|
24
28
|
>
|
|
25
29
|
<slot name="content" />
|
|
@@ -308,7 +308,7 @@ const handleCloseGlobalPageStyles = async function () {
|
|
|
308
308
|
:title="translate('Global Page Styles')"
|
|
309
309
|
@closeMainModalBuilder="handleCloseGlobalPageStyles"
|
|
310
310
|
>
|
|
311
|
-
<div class="pbx-flex pbx-flex-col pbx-gap-2 pbx-pt-4 pbx-pb-2">
|
|
311
|
+
<div id="pagebuilder-right-menu" class="pbx-flex pbx-flex-col pbx-gap-2 pbx-pt-4 pbx-pb-2">
|
|
312
312
|
<div v-if="isLoadingPageStyles">
|
|
313
313
|
<div class="pbx-flex pbx-items-center pbx-my-2 pbx-py-4 pbx-px-2 pbx-justify-center">
|
|
314
314
|
<div
|
|
@@ -28,7 +28,7 @@ watchEffect(() => {
|
|
|
28
28
|
const doc = iframe.contentWindow.document
|
|
29
29
|
doc.open()
|
|
30
30
|
doc.write(
|
|
31
|
-
`<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body><div id="
|
|
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
32
|
)
|
|
33
33
|
doc.close()
|
|
34
34
|
|
|
@@ -46,7 +46,7 @@ watchEffect(() => {
|
|
|
46
46
|
<div
|
|
47
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
48
|
>
|
|
49
|
-
<div id="
|
|
49
|
+
<div id="pagebuilder">
|
|
50
50
|
<div class="" v-html="htmlPage"></div>
|
|
51
51
|
</div>
|
|
52
52
|
</div>
|
package/src/css/style.css
CHANGED
|
@@ -315,23 +315,13 @@
|
|
|
315
315
|
}
|
|
316
316
|
|
|
317
317
|
.pbx-myPrimaryInput {
|
|
318
|
-
@apply pbx-
|
|
319
|
-
}
|
|
320
|
-
.pbx-myPrimaryInputNoBorder {
|
|
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;
|
|
322
|
-
}
|
|
323
|
-
.pbx-myPrimaryInputReadonly {
|
|
324
|
-
@apply pbx-myPrimaryInput pbx-bg-gray-50 focus:pbx-ring-0 focus:pbx-bg-myPrimaryLightGrayColor focus:pbx-border-myPrimaryMediumGrayColor;
|
|
318
|
+
@apply pbx-w-full pbx-font-sans;
|
|
325
319
|
}
|
|
326
320
|
|
|
327
321
|
.pbx-myPrimaryInputError {
|
|
328
322
|
@apply pbx-mt-1 pbx-myPrimaryParagraph pbx-block pbx-font-normal pbx-text-myPrimaryErrorColor pbx-text-left pbx-text-sm;
|
|
329
323
|
}
|
|
330
324
|
|
|
331
|
-
.pbx-myPrimaryHiddenInputField {
|
|
332
|
-
@apply pbx-px-0;
|
|
333
|
-
}
|
|
334
|
-
|
|
335
325
|
.pbx-myPrimaryTextArea {
|
|
336
326
|
@apply pbx-block pbx-w-full sm:pbx-text-sm pbx-font-normal pbx-text-myPrimaryDarkGrayColor placeholder:pbx-font-normal placeholder:pbx-accent-gray-400 pbx-bg-gray-50 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 focus:pbx-ring-2 focus:pbx-ring-myPrimaryLinkColor focus:pbx-border-transparent;
|
|
337
327
|
}
|
|
@@ -341,7 +331,7 @@
|
|
|
341
331
|
}
|
|
342
332
|
|
|
343
333
|
.pbx-myPrimarySelect {
|
|
344
|
-
@apply pbx-
|
|
334
|
+
@apply pbx-myPrimaryInput;
|
|
345
335
|
}
|
|
346
336
|
.pbx-myPrimaryFakeSelect {
|
|
347
337
|
@apply hover:pbx-ring-myPrimaryLinkColor pbx-border pbx-border-gray-300 pbx-flex pbx-flex-row pbx-justify-between pbx-items-center pbx-myPrimaryGap pbx-py-2.5 pbx-pl-3 pbx-pr-1 pbx-cursor-pointer hover:pbx-border-transparent hover:pbx-ring-2 pbx-rounded-md;
|
|
@@ -478,42 +468,49 @@
|
|
|
478
468
|
|
|
479
469
|
.pbx-myPrimaryInput,
|
|
480
470
|
.pbx-myPrimarySelect {
|
|
471
|
+
border: 1px solid #e9e9e9;
|
|
472
|
+
padding: 0.40625rem 0.625rem;
|
|
473
|
+
padding-right: 1.75rem;
|
|
474
|
+
font-size: 0.875rem;
|
|
475
|
+
border-radius: 0.5rem;
|
|
476
|
+
cursor: pointer;
|
|
477
|
+
line-height: 1.5;
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
.pbx-myPrimarySelect {
|
|
481
|
+
-webkit-appearance: none;
|
|
482
|
+
-moz-appearance: none;
|
|
483
|
+
appearance: none;
|
|
484
|
+
background-color: #fff;
|
|
485
|
+
background-image: url("data:image/svg+xml,%3Csvg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.792893C0.683417 0.402369 1.31658 0.402369 1.70711 0.792893L4 3.08579L6.29289 0.792893C6.68342 0.402369 7.31658 0.402369 7.70711 0.792893C8.09763 1.18342 8.09763 1.81658 7.70711 2.20711L4.70711 5.20711C4.31658 5.59763 3.68342 5.59763 3.29289 5.20711L0.292893 2.20711C-0.0976311 1.81658 -0.0976311 1.18342 0.292893 0.792893Z' fill='%2335261C' fill-opacity='0.3'/%3E%3C/svg%3E");
|
|
486
|
+
background-repeat: no-repeat;
|
|
487
|
+
background-position: right 0.625rem center;
|
|
488
|
+
background-size: 0.5rem;
|
|
481
489
|
}
|
|
482
490
|
|
|
483
491
|
.pbx-myPrimaryInput:focus,
|
|
484
492
|
.pbx-myPrimarySelect:focus {
|
|
485
493
|
--tw-ring-inset: inset;
|
|
486
494
|
--tw-ring-opacity: 1;
|
|
487
|
-
/* Use the hex color with opacity variable */
|
|
488
495
|
--tw-ring-color: rgba(22, 163, 74, var(--tw-ring-opacity, 1));
|
|
489
|
-
|
|
490
496
|
--tw-ring-shadow: 0 0 0 4px var(--tw-ring-color);
|
|
491
|
-
|
|
492
497
|
--tw-ring-offset-width: 2px;
|
|
493
498
|
--tw-ring-offset-color: white;
|
|
494
499
|
--tw-ring-offset-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
495
|
-
|
|
496
500
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow);
|
|
497
501
|
border: 1px #dee6f0 solid;
|
|
498
502
|
}
|
|
499
503
|
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
#
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
#page-builder-wrapper h4,
|
|
511
|
-
#page-builder-wrapper h5,
|
|
512
|
-
#page-builder-wrapper h6,
|
|
513
|
-
#page-builder-wrapper ul,
|
|
514
|
-
#page-builder-wrapper ol,
|
|
515
|
-
#page-builder-wrapper li {
|
|
516
|
-
margin: 0;
|
|
504
|
+
.pbx-myPrimaryInput:focus-visible,
|
|
505
|
+
.pbx-myPrimarySelect:focus-visible {
|
|
506
|
+
outline: none;
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
#pagebuilder-right-menu hr {
|
|
510
|
+
border: none;
|
|
511
|
+
height: 1px;
|
|
512
|
+
background: oklch(93.6% 0.032 17.717);
|
|
513
|
+
box-shadow: oklch(93.6% 0.032 17.717);
|
|
517
514
|
}
|
|
518
515
|
|
|
519
516
|
#page-builder-editor ol,
|
|
@@ -539,3 +536,48 @@
|
|
|
539
536
|
list-style: none;
|
|
540
537
|
padding: 0;
|
|
541
538
|
}
|
|
539
|
+
|
|
540
|
+
/* Page Builder Start*/
|
|
541
|
+
#pagebuilder input,
|
|
542
|
+
#pagebuilder button,
|
|
543
|
+
#pagebuilder textarea,
|
|
544
|
+
#pagebuilder select {
|
|
545
|
+
font: inherit;
|
|
546
|
+
color: inherit;
|
|
547
|
+
background: none;
|
|
548
|
+
border: none;
|
|
549
|
+
padding: 0;
|
|
550
|
+
margin: 0;
|
|
551
|
+
}
|
|
552
|
+
#pagebuilder blockquote,
|
|
553
|
+
#pagebuilder dl,
|
|
554
|
+
#pagebuilder dd,
|
|
555
|
+
#pagebuilder pre,
|
|
556
|
+
#pagebuilder hr,
|
|
557
|
+
#pagebuilder figure,
|
|
558
|
+
#pagebuilder p,
|
|
559
|
+
#pagebuilder h1,
|
|
560
|
+
#pagebuilder h2,
|
|
561
|
+
#pagebuilder h3,
|
|
562
|
+
#pagebuilder h4,
|
|
563
|
+
#pagebuilder h5,
|
|
564
|
+
#pagebuilder h6,
|
|
565
|
+
#pagebuilder ul,
|
|
566
|
+
#pagebuilder ol,
|
|
567
|
+
#pagebuilder li {
|
|
568
|
+
margin: 0;
|
|
569
|
+
font-weight: inherit;
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
#pagebuilder input,
|
|
573
|
+
#pagebuilder button,
|
|
574
|
+
#pagebuilder textarea,
|
|
575
|
+
#pagebuilder select {
|
|
576
|
+
font: inherit;
|
|
577
|
+
color: inherit;
|
|
578
|
+
background: none;
|
|
579
|
+
border: none;
|
|
580
|
+
padding: 0;
|
|
581
|
+
margin: 0;
|
|
582
|
+
}
|
|
583
|
+
/* Page Builder End*/
|