@myissue/vue-website-page-builder 3.3.78 → 3.3.80
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/{ar-CCqXqp3s.js → ar-BKP2GbBb.js} +40 -20
- package/dist/{de-DU6Hv8W2.js → de-CX2p6WRg.js} +45 -25
- package/dist/{en-DzWxts11.js → en-hbIz7x2o.js} +32 -12
- package/dist/{es-DmzWA1F8.js → es-BxsOdyOn.js} +32 -12
- package/dist/{fr-BARDIQ1D.js → fr-SEE-rKYV.js} +48 -28
- package/dist/{hi-BgQJcRDP.js → hi-DZd4Kv3J.js} +38 -18
- package/dist/{ja-Drg74-B1.js → ja-BGzkN2We.js} +42 -22
- package/dist/{pt-5fYEJgIl.js → pt-BMfrvh-9.js} +43 -23
- package/dist/{ru-D0zybCPa.js → ru-wi4VbdJp.js} +40 -20
- package/dist/style.css +1 -1
- package/dist/vue-website-page-builder.js +2250 -2249
- package/dist/vue-website-page-builder.umd.cjs +37 -37
- package/dist/{zh-Hans-notf0z2N.js → zh-Hans-B4txt13y.js} +42 -22
- package/package.json +1 -1
- package/src/Components/Modals/ModalBuilder.vue +2 -2
- package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue +1 -1
- package/src/Components/TipTap/TipTap.vue +4 -1
- package/src/Components/TipTap/TipTapInput.vue +17 -12
- package/src/PageBuilder/PageBuilder.vue +277 -280
- package/src/PageBuilder/Preview.vue +1 -1
- package/src/locales/ar.json +18 -1
- package/src/locales/de.json +18 -1
- package/src/locales/en.json +18 -1
- package/src/locales/es.json +18 -1
- package/src/locales/fr.json +18 -1
- package/src/locales/hi.json +18 -1
- package/src/locales/ja.json +18 -1
- package/src/locales/pt.json +18 -1
- package/src/locales/ru.json +18 -1
- package/src/locales/zh-Hans.json +18 -1
- package/src/services/PageBuilderService.ts +3 -13
- package/src/tests/PageBuilderTest.vue +34 -10
- package/src/tests/componentsArray.test.json +8 -8
|
@@ -513,73 +513,113 @@ onMounted(async () => {
|
|
|
513
513
|
<main></main>
|
|
514
514
|
</DynamicModalBuilder>
|
|
515
515
|
|
|
516
|
-
<div
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
516
|
+
<div
|
|
517
|
+
id="pagebuilder-toolbar-area"
|
|
518
|
+
class="pbx-flex pbx-items-center pbx-justify-between pbx-bg-myPrimaryLightGrayColor pbx-border-0 pbx-border-solid pbx-border-b pbx-border-gray-200 pbx-mb-2 lg:pbx-px-6 pbx-px-4 pbx-font-sans pbx-min-w-max pbx-w-full"
|
|
519
|
+
>
|
|
520
|
+
<template
|
|
521
|
+
v-if="
|
|
522
|
+
getPageBuilderConfig &&
|
|
523
|
+
getPageBuilderConfig.pageBuilderLogo &&
|
|
524
|
+
getPageBuilderConfig.pageBuilderLogo.src
|
|
525
|
+
"
|
|
521
526
|
>
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
+
<!-- Logo # start -->
|
|
528
|
+
<div
|
|
529
|
+
@click.self="
|
|
530
|
+
async () => {
|
|
531
|
+
await pageBuilderService.clearHtmlSelection()
|
|
532
|
+
}
|
|
527
533
|
"
|
|
534
|
+
class="pbx-flex-1 pbx-flex pbx-justify-start pbx-py-2 pbx-min-h-20 pbx-max-h-20 pbx-w-full"
|
|
528
535
|
>
|
|
529
|
-
<!-- Logo # start -->
|
|
530
536
|
<div
|
|
531
|
-
@click
|
|
537
|
+
@click="
|
|
532
538
|
async () => {
|
|
533
539
|
await pageBuilderService.clearHtmlSelection()
|
|
534
540
|
}
|
|
535
541
|
"
|
|
536
|
-
class="pbx-flex pbx-
|
|
542
|
+
class="pbx-flex pbx-items-center pbx-justify-center"
|
|
543
|
+
>
|
|
544
|
+
<div id="pagebuilder-logo-main" class="pbx-flex pbx-items-center pbx-justify-center">
|
|
545
|
+
<img class="pbx-h-6" :src="getPageBuilderConfig.pageBuilderLogo.src" alt="Logo" />
|
|
546
|
+
</div>
|
|
547
|
+
</div>
|
|
548
|
+
</div>
|
|
549
|
+
</template>
|
|
550
|
+
<!-- Logo # end -->
|
|
551
|
+
|
|
552
|
+
<div
|
|
553
|
+
@click.self="
|
|
554
|
+
async () => {
|
|
555
|
+
await pageBuilderService.clearHtmlSelection()
|
|
556
|
+
}
|
|
557
|
+
"
|
|
558
|
+
class="pbx-flex-1 pbx-flex pbx-justify-center pbx-items-center pbx-py-2 pbx-min-h-20 pbx-max-h-20 pbx-w-full"
|
|
559
|
+
>
|
|
560
|
+
<div class="pbx-flex pbx-items-center pbx-justify-center">
|
|
561
|
+
<!-- Save Start -->
|
|
562
|
+
<button
|
|
563
|
+
class="pbx-mySecondaryButton pbx-h-6 pbx-flex pbx-gap-2 pbx-mr-2"
|
|
564
|
+
@click.stop="
|
|
565
|
+
async () => {
|
|
566
|
+
await pageBuilderService.clearHtmlSelection()
|
|
567
|
+
await pageBuilderService.handleManualSave()
|
|
568
|
+
}
|
|
569
|
+
"
|
|
570
|
+
type="button"
|
|
571
|
+
:disabled="getIsSaving"
|
|
537
572
|
>
|
|
538
573
|
<div
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
await pageBuilderService.clearHtmlSelection()
|
|
542
|
-
}
|
|
543
|
-
"
|
|
544
|
-
class="pbx-flex pbx-items-center pbx-justify-center"
|
|
574
|
+
v-if="!getIsSaving"
|
|
575
|
+
class="pbx-h-10 pbx-w-4 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-justify-center"
|
|
545
576
|
>
|
|
546
|
-
<
|
|
547
|
-
<img class="pbx-h-6" :src="getPageBuilderConfig.pageBuilderLogo.src" alt="Logo" />
|
|
548
|
-
</div>
|
|
577
|
+
<span class="material-symbols-outlined">save</span>
|
|
549
578
|
</div>
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
579
|
+
<div
|
|
580
|
+
v-if="getIsSaving"
|
|
581
|
+
class="pbx-h-10 pbx-w-4 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-justify-center"
|
|
582
|
+
>
|
|
583
|
+
<span class="pbx-relative pbx-flex pbx-size-3">
|
|
584
|
+
<span
|
|
585
|
+
class="pbx-absolute pbx-inline-flex pbx-h-full pbx-w-full pbx-animate-ping pbx-rounded-full pbx-bg-gray-400 pbx-opacity-75"
|
|
586
|
+
></span>
|
|
587
|
+
<span
|
|
588
|
+
class="pbx-relative pbx-inline-flex pbx-size-3 pbx-rounded-full pbx-bg-green-200"
|
|
589
|
+
></span>
|
|
590
|
+
</span>
|
|
591
|
+
</div>
|
|
592
|
+
<div>{{ translate('Save') }}</div>
|
|
593
|
+
</button>
|
|
594
|
+
<!-- Save End -->
|
|
553
595
|
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
<div class="pbx-flex pbx-items-center pbx-justify-center">
|
|
563
|
-
<!-- Save Start -->
|
|
596
|
+
<!-- Restore Start -->
|
|
597
|
+
<template
|
|
598
|
+
v-if="
|
|
599
|
+
getPageBuilderConfig &&
|
|
600
|
+
getPageBuilderConfig.updateOrCreate &&
|
|
601
|
+
getPageBuilderConfig.updateOrCreate.formType === 'update'
|
|
602
|
+
"
|
|
603
|
+
>
|
|
564
604
|
<button
|
|
565
|
-
class="pbx-mySecondaryButton pbx-h-6 pbx-flex pbx-gap-2
|
|
605
|
+
class="pbx-mySecondaryButton pbx-h-6 pbx-flex pbx-gap-2 lg:mr-2"
|
|
566
606
|
@click.stop="
|
|
567
607
|
async () => {
|
|
568
608
|
await pageBuilderService.clearHtmlSelection()
|
|
569
|
-
await
|
|
609
|
+
await handleRestoreOriginalContent()
|
|
570
610
|
}
|
|
571
611
|
"
|
|
572
612
|
type="button"
|
|
573
|
-
:disabled="
|
|
613
|
+
:disabled="getIsRestoring"
|
|
574
614
|
>
|
|
575
615
|
<div
|
|
576
|
-
v-if="!
|
|
616
|
+
v-if="!getIsRestoring"
|
|
577
617
|
class="pbx-h-10 pbx-w-4 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-justify-center"
|
|
578
618
|
>
|
|
579
|
-
<span class="material-symbols-outlined">
|
|
619
|
+
<span class="material-symbols-outlined"> settings_backup_restore </span>
|
|
580
620
|
</div>
|
|
581
621
|
<div
|
|
582
|
-
v-if="
|
|
622
|
+
v-if="getIsRestoring"
|
|
583
623
|
class="pbx-h-10 pbx-w-4 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-justify-center"
|
|
584
624
|
>
|
|
585
625
|
<span class="pbx-relative pbx-flex pbx-size-3">
|
|
@@ -591,158 +631,114 @@ onMounted(async () => {
|
|
|
591
631
|
></span>
|
|
592
632
|
</span>
|
|
593
633
|
</div>
|
|
594
|
-
<div
|
|
634
|
+
<div class="lg:pbx-block pbx-hidden">
|
|
635
|
+
<span> {{ translate('Reset Page') }} </span>
|
|
636
|
+
</div>
|
|
595
637
|
</button>
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
<!-- Restore Start -->
|
|
599
|
-
<template
|
|
600
|
-
v-if="
|
|
601
|
-
getPageBuilderConfig &&
|
|
602
|
-
getPageBuilderConfig.updateOrCreate &&
|
|
603
|
-
getPageBuilderConfig.updateOrCreate.formType === 'update'
|
|
604
|
-
"
|
|
605
|
-
>
|
|
606
|
-
<button
|
|
607
|
-
class="pbx-mySecondaryButton pbx-h-6 pbx-flex pbx-gap-2 lg:mr-2"
|
|
608
|
-
@click.stop="
|
|
609
|
-
async () => {
|
|
610
|
-
await pageBuilderService.clearHtmlSelection()
|
|
611
|
-
await handleRestoreOriginalContent()
|
|
612
|
-
}
|
|
613
|
-
"
|
|
614
|
-
type="button"
|
|
615
|
-
:disabled="getIsRestoring"
|
|
616
|
-
>
|
|
617
|
-
<div
|
|
618
|
-
v-if="!getIsRestoring"
|
|
619
|
-
class="pbx-h-10 pbx-w-4 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-justify-center"
|
|
620
|
-
>
|
|
621
|
-
<span class="material-symbols-outlined"> settings_backup_restore </span>
|
|
622
|
-
</div>
|
|
623
|
-
<div
|
|
624
|
-
v-if="getIsRestoring"
|
|
625
|
-
class="pbx-h-10 pbx-w-4 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-justify-center"
|
|
626
|
-
>
|
|
627
|
-
<span class="pbx-relative pbx-flex pbx-size-3">
|
|
628
|
-
<span
|
|
629
|
-
class="pbx-absolute pbx-inline-flex pbx-h-full pbx-w-full pbx-animate-ping pbx-rounded-full pbx-bg-gray-400 pbx-opacity-75"
|
|
630
|
-
></span>
|
|
631
|
-
<span
|
|
632
|
-
class="pbx-relative pbx-inline-flex pbx-size-3 pbx-rounded-full pbx-bg-green-200"
|
|
633
|
-
></span>
|
|
634
|
-
</span>
|
|
635
|
-
</div>
|
|
636
|
-
<div class="lg:pbx-block pbx-hidden">
|
|
637
|
-
<span> {{ translate('Reset Page') }} </span>
|
|
638
|
-
</div>
|
|
639
|
-
</button>
|
|
640
|
-
</template>
|
|
641
|
-
<!-- Restore End -->
|
|
642
|
-
</div>
|
|
638
|
+
</template>
|
|
639
|
+
<!-- Restore End -->
|
|
643
640
|
</div>
|
|
641
|
+
</div>
|
|
644
642
|
|
|
643
|
+
<div
|
|
644
|
+
@click.self="
|
|
645
|
+
async () => {
|
|
646
|
+
await pageBuilderService.clearHtmlSelection()
|
|
647
|
+
}
|
|
648
|
+
"
|
|
649
|
+
class="pbx-flex-1 pbx-flex pbx-justify-center pbx-items-center pbx-py-2 pbx-min-h-20 pbx-max-h-20 pbx-w-full"
|
|
650
|
+
>
|
|
645
651
|
<div
|
|
646
652
|
@click.self="
|
|
647
653
|
async () => {
|
|
648
654
|
await pageBuilderService.clearHtmlSelection()
|
|
649
655
|
}
|
|
650
656
|
"
|
|
651
|
-
class="pbx-flex pbx-
|
|
657
|
+
class="pbx-flex pbx-items-center pbx-justify-center"
|
|
652
658
|
>
|
|
653
659
|
<div
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
660
|
+
class="pbx-mr-2"
|
|
661
|
+
@click="
|
|
662
|
+
() => {
|
|
663
|
+
pageBuilderStateStore.setComponentArrayAddMethod('unshift')
|
|
664
|
+
handleAddComponent()
|
|
657
665
|
}
|
|
658
666
|
"
|
|
659
|
-
class="pbx-flex pbx-items-center pbx-justify-center"
|
|
660
667
|
>
|
|
668
|
+
<div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2 pbx-border-gray-200">
|
|
669
|
+
<span class="lg:pbx-block pbx-hidden">
|
|
670
|
+
<div class="pbx-whitespace-nowrap pbx-cursor-pointer">
|
|
671
|
+
{{ translate('Add new Components') }}
|
|
672
|
+
</div>
|
|
673
|
+
</span>
|
|
674
|
+
<span
|
|
675
|
+
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 focus-visible:pbx-ring-0 pbx-text-black hover:pbx-text-white"
|
|
676
|
+
>
|
|
677
|
+
<span class="pbx-myMediumIcon material-symbols-outlined"> interests </span>
|
|
678
|
+
</span>
|
|
679
|
+
</div>
|
|
680
|
+
</div>
|
|
681
|
+
<div class="pbx-flex pbx-items-center pbx-justify-center pbx-mr-2">
|
|
661
682
|
<div
|
|
662
|
-
class="pbx-mr-2"
|
|
663
683
|
@click="
|
|
664
|
-
() => {
|
|
665
|
-
pageBuilderStateStore.
|
|
666
|
-
|
|
684
|
+
async () => {
|
|
685
|
+
pageBuilderStateStore.setMenuRight(false)
|
|
686
|
+
pageBuilderStateStore.setElement(null)
|
|
687
|
+
await pageBuilderService.clearHtmlSelection()
|
|
688
|
+
handlePageBuilderPreview()
|
|
667
689
|
}
|
|
668
690
|
"
|
|
669
691
|
>
|
|
670
|
-
<div
|
|
671
|
-
class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2 pbx-border-gray-200"
|
|
672
|
-
>
|
|
673
|
-
<span class="lg:pbx-block pbx-hidden">
|
|
674
|
-
<div class="pbx-whitespace-nowrap pbx-cursor-pointer">
|
|
675
|
-
{{ translate('Add new Components') }}
|
|
676
|
-
</div>
|
|
677
|
-
</span>
|
|
692
|
+
<div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2">
|
|
678
693
|
<span
|
|
679
694
|
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 focus-visible:pbx-ring-0 pbx-text-black hover:pbx-text-white"
|
|
680
695
|
>
|
|
681
|
-
<span class="pbx-myMediumIcon material-symbols-outlined">
|
|
696
|
+
<span class="pbx-myMediumIcon material-symbols-outlined"> visibility </span>
|
|
682
697
|
</span>
|
|
683
698
|
</div>
|
|
684
699
|
</div>
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
</span>
|
|
702
|
-
</
|
|
703
|
-
</div>
|
|
704
|
-
</div>
|
|
705
|
-
<div class="lg:pbx-flex pbx-hidden pbx-items-center pbx-justify-center">
|
|
706
|
-
<div
|
|
707
|
-
@click="
|
|
708
|
-
async () => {
|
|
709
|
-
pageBuilderStateStore.setMenuRight(false)
|
|
710
|
-
pageBuilderStateStore.setElement(null)
|
|
711
|
-
await pageBuilderService.clearHtmlSelection()
|
|
712
|
-
handlePageBuilderPreviewMobile()
|
|
713
|
-
}
|
|
714
|
-
"
|
|
715
|
-
>
|
|
716
|
-
<div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2">
|
|
717
|
-
<span
|
|
718
|
-
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 hover:pbx-text-white"
|
|
719
|
-
>
|
|
720
|
-
<span class="material-symbols-outlined"> phone_iphone </span>
|
|
721
|
-
</span>
|
|
722
|
-
</div>
|
|
700
|
+
</div>
|
|
701
|
+
<div class="lg:pbx-flex pbx-hidden pbx-items-center pbx-justify-center">
|
|
702
|
+
<div
|
|
703
|
+
@click="
|
|
704
|
+
async () => {
|
|
705
|
+
pageBuilderStateStore.setMenuRight(false)
|
|
706
|
+
pageBuilderStateStore.setElement(null)
|
|
707
|
+
await pageBuilderService.clearHtmlSelection()
|
|
708
|
+
handlePageBuilderPreviewMobile()
|
|
709
|
+
}
|
|
710
|
+
"
|
|
711
|
+
>
|
|
712
|
+
<div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2">
|
|
713
|
+
<span
|
|
714
|
+
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 hover:pbx-text-white"
|
|
715
|
+
>
|
|
716
|
+
<span class="material-symbols-outlined"> phone_iphone </span>
|
|
717
|
+
</span>
|
|
723
718
|
</div>
|
|
724
719
|
</div>
|
|
725
720
|
</div>
|
|
726
721
|
</div>
|
|
722
|
+
</div>
|
|
727
723
|
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
</div>
|
|
741
|
-
<!-- Options # Start -->
|
|
724
|
+
<div class="pbx-flex-1 pbx-flex gap-2 pbx-items-center pbx-justify-end">
|
|
725
|
+
<!-- Options # Start -->
|
|
726
|
+
<div
|
|
727
|
+
@click.self="
|
|
728
|
+
async () => {
|
|
729
|
+
await pageBuilderService.clearHtmlSelection()
|
|
730
|
+
}
|
|
731
|
+
"
|
|
732
|
+
class="pbx-flex pbx-items-center pbx-py-2 pbx-min-h-20 pbx-max-h-20 pbx-w-full"
|
|
733
|
+
:class="[showCloseButton ? 'pbx-justify-between' : 'pbx-justify-end']"
|
|
734
|
+
>
|
|
735
|
+
<ToolbarOption></ToolbarOption>
|
|
742
736
|
</div>
|
|
737
|
+
<!-- Options # Start -->
|
|
738
|
+
|
|
743
739
|
<!-- Close & Publish buttons start -->
|
|
744
740
|
<template v-if="showPublishButton">
|
|
745
|
-
<div class="pbx-ml-2">
|
|
741
|
+
<div class="pbx-flex-1 pbx-ml-2">
|
|
746
742
|
<button
|
|
747
743
|
class="pbx-myPrimaryButton"
|
|
748
744
|
@click="
|
|
@@ -765,7 +761,7 @@ onMounted(async () => {
|
|
|
765
761
|
>
|
|
766
762
|
</template>
|
|
767
763
|
<template v-if="showCloseButton">
|
|
768
|
-
<div class="pbx-ml-2">
|
|
764
|
+
<div class="pbx-flex-1 pbx-ml-2">
|
|
769
765
|
<button
|
|
770
766
|
class="pbx-h-10 pbx-w-10 pbx-flex-end 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 hover:pbx-fill-white focus-visible:pbx-ring-0"
|
|
771
767
|
@click="
|
|
@@ -797,8 +793,9 @@ onMounted(async () => {
|
|
|
797
793
|
getPageBuilderConfig.userSettings.language
|
|
798
794
|
"
|
|
799
795
|
>
|
|
800
|
-
<div class="pbx-flex pbx-justify-
|
|
796
|
+
<div class="pbx-flex-1 pbx-flex pbx-justify-end pbx-items-center pbx-ml-2">
|
|
801
797
|
<select
|
|
798
|
+
id="pbx-lang"
|
|
802
799
|
class="pbx-myPrimarySelect pbx-min-w-20 pbx-max-w-2pbx-min-w-20 pbx-w-max"
|
|
803
800
|
v-model="languageSelction"
|
|
804
801
|
>
|
|
@@ -833,149 +830,149 @@ onMounted(async () => {
|
|
|
833
830
|
</template>
|
|
834
831
|
</template>
|
|
835
832
|
</div>
|
|
833
|
+
</div>
|
|
836
834
|
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
}
|
|
857
|
-
"
|
|
858
|
-
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 hover:pbx-text-white"
|
|
859
|
-
>
|
|
860
|
-
<span class="pbx-myMediumIcon material-symbols-outlined"> interests </span>
|
|
861
|
-
</button>
|
|
862
|
-
</div>
|
|
863
|
-
<div
|
|
864
|
-
@click.self="
|
|
865
|
-
async () => {
|
|
866
|
-
await pageBuilderService.clearHtmlSelection()
|
|
835
|
+
<!-- Top Layout Save And Reset Area - End -->
|
|
836
|
+
<div class="pbx-relative pbx-h-full pbx-flex pbx-pb-2 pbx-gap-2">
|
|
837
|
+
<div
|
|
838
|
+
@click.self="
|
|
839
|
+
async () => {
|
|
840
|
+
await pageBuilderService.clearHtmlSelection()
|
|
841
|
+
}
|
|
842
|
+
"
|
|
843
|
+
id="pagebuilder-left-area"
|
|
844
|
+
class="pbx-min-w-[3.5rem] pbx-pt-7 pbx-pb-2 pbx-ml-2 pbx-bg-myPrimaryLightGrayColor pbx-rounded-full pbx-shadow-sm"
|
|
845
|
+
>
|
|
846
|
+
<div class="pbx-mx-2 pbx-flex pbx-flex-col pbx-myPrimaryGap pbx-items-stretch">
|
|
847
|
+
<div class="pbx-flex pbx-gap-2 pbx-items-center pbx-justify-center">
|
|
848
|
+
<button
|
|
849
|
+
type="button"
|
|
850
|
+
@click="
|
|
851
|
+
() => {
|
|
852
|
+
pageBuilderStateStore.setComponentArrayAddMethod('unshift')
|
|
853
|
+
handleAddComponent()
|
|
867
854
|
}
|
|
868
855
|
"
|
|
856
|
+
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 hover:pbx-text-white"
|
|
869
857
|
>
|
|
870
|
-
<
|
|
871
|
-
</
|
|
858
|
+
<span class="pbx-myMediumIcon material-symbols-outlined"> interests </span>
|
|
859
|
+
</button>
|
|
872
860
|
</div>
|
|
873
|
-
</div>
|
|
874
|
-
|
|
875
|
-
<main
|
|
876
|
-
ref="pbxToolBar"
|
|
877
|
-
class="pbx-font-sans pbx-p-1 pbx-flex pbx-flex-col pbx-grow pbx-rounded-tr-2xl pbx-rounded-tl-2xl pbx-border-solid pbx-border pbx-border-gray-200 pbx-items-stretch pbx-h-[100vh] pbx-text-black"
|
|
878
|
-
:class="{ 'pbx-mr-2': !getMenuRight, '': getMenuRight }"
|
|
879
|
-
>
|
|
880
861
|
<div
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
background: oklch(86.9% 0.005 56.366);
|
|
862
|
+
@click.self="
|
|
863
|
+
async () => {
|
|
864
|
+
await pageBuilderService.clearHtmlSelection()
|
|
865
|
+
}
|
|
886
866
|
"
|
|
887
867
|
>
|
|
888
|
-
<
|
|
889
|
-
<EditGetElement></EditGetElement>
|
|
890
|
-
</template>
|
|
891
|
-
<template v-if="getRestoredElement">
|
|
892
|
-
<button
|
|
893
|
-
@click="pageBuilderService.restoreDeletedElementToDOM"
|
|
894
|
-
type="button"
|
|
895
|
-
class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white pbx-bg-gray-200 focus-visible:pbx-ring-0"
|
|
896
|
-
>
|
|
897
|
-
<span class="material-symbols-outlined"> undo </span>
|
|
898
|
-
</button>
|
|
899
|
-
</template>
|
|
868
|
+
<ComponentTopMenu v-if="getElement"></ComponentTopMenu>
|
|
900
869
|
</div>
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
<div id="pagebuilder" class="pbx-text-black pbx-font-sans">
|
|
904
|
-
<template v-for="component in getComponents" :key="component.id">
|
|
905
|
-
<section
|
|
906
|
-
v-if="component.html_code"
|
|
907
|
-
v-html="component.html_code"
|
|
908
|
-
@mouseup="handleSelectComponent(component)"
|
|
909
|
-
></section>
|
|
910
|
-
</template>
|
|
911
|
-
</div>
|
|
912
|
-
</main>
|
|
870
|
+
</div>
|
|
871
|
+
</div>
|
|
913
872
|
|
|
873
|
+
<main
|
|
874
|
+
ref="pbxToolBar"
|
|
875
|
+
class="pbx-font-sans pbx-p-1 pbx-flex pbx-flex-col pbx-grow pbx-rounded-tr-2xl pbx-rounded-tl-2xl pbx-border-solid pbx-border pbx-border-gray-200 pbx-items-stretch pbx-h-[100vh] pbx-text-black"
|
|
876
|
+
:class="{ 'pbx-mr-2': !getMenuRight, '': getMenuRight }"
|
|
877
|
+
>
|
|
914
878
|
<div
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
879
|
+
id="pbxEditToolbar"
|
|
880
|
+
class="pbx-z-30 lg:pbx-mx-20 pbx-flex pbx-gap-2 pbx-justify-center pbx-items-center pbx-rounded pbx-px-4 pbx-bg-red-200 pbx-h-0"
|
|
881
|
+
style="
|
|
882
|
+
box-shadow: 0 0 0 10px oklch(86.9% 0.005 56.366);
|
|
883
|
+
background: oklch(86.9% 0.005 56.366);
|
|
920
884
|
"
|
|
921
|
-
class="pbx-min-w-[3rem] pbx-pt-6 pbx-pb-2"
|
|
922
885
|
>
|
|
923
|
-
<
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
}
|
|
928
|
-
"
|
|
929
|
-
class="pbx-flex pbx-flex-col pbx-items-center pbx-justify-center pbx-gap-2"
|
|
930
|
-
>
|
|
886
|
+
<template v-if="getElement">
|
|
887
|
+
<EditGetElement></EditGetElement>
|
|
888
|
+
</template>
|
|
889
|
+
<template v-if="getRestoredElement">
|
|
931
890
|
<button
|
|
932
|
-
|
|
933
|
-
@click="pageBuilderStateStore.setMenuRight(true)"
|
|
891
|
+
@click="pageBuilderService.restoreDeletedElementToDOM"
|
|
934
892
|
type="button"
|
|
935
|
-
class="pbx-
|
|
893
|
+
class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white pbx-bg-gray-200 focus-visible:pbx-ring-0"
|
|
936
894
|
>
|
|
937
|
-
<span>
|
|
895
|
+
<span class="material-symbols-outlined"> undo </span>
|
|
938
896
|
</button>
|
|
939
|
-
</
|
|
897
|
+
</template>
|
|
940
898
|
</div>
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
</aside>
|
|
954
|
-
</div>
|
|
899
|
+
<!-- Element Popover toolbar end -->
|
|
900
|
+
|
|
901
|
+
<div id="pagebuilder" class="pbx-text-black pbx-font-sans">
|
|
902
|
+
<template v-for="component in getComponents" :key="component.id">
|
|
903
|
+
<section
|
|
904
|
+
v-if="component.html_code"
|
|
905
|
+
v-html="component.html_code"
|
|
906
|
+
@mouseup="handleSelectComponent(component)"
|
|
907
|
+
></section>
|
|
908
|
+
</template>
|
|
909
|
+
</div>
|
|
910
|
+
</main>
|
|
955
911
|
|
|
956
912
|
<div
|
|
957
|
-
|
|
913
|
+
v-if="!getMenuRight"
|
|
914
|
+
@click.self="
|
|
915
|
+
async () => {
|
|
916
|
+
await pageBuilderService.clearHtmlSelection()
|
|
917
|
+
}
|
|
918
|
+
"
|
|
919
|
+
class="pbx-min-w-[3rem] pbx-pt-6 pbx-pb-2"
|
|
958
920
|
>
|
|
959
921
|
<div
|
|
960
|
-
@click="
|
|
961
|
-
() => {
|
|
962
|
-
|
|
963
|
-
handleAddComponent()
|
|
922
|
+
@click.self="
|
|
923
|
+
async () => {
|
|
924
|
+
await pageBuilderService.clearHtmlSelection()
|
|
964
925
|
}
|
|
965
926
|
"
|
|
966
|
-
class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2
|
|
927
|
+
class="pbx-flex pbx-flex-col pbx-items-center pbx-justify-center pbx-gap-2"
|
|
967
928
|
>
|
|
968
|
-
<
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
929
|
+
<button
|
|
930
|
+
v-if="!getMenuRight"
|
|
931
|
+
@click="pageBuilderStateStore.setMenuRight(true)"
|
|
932
|
+
type="button"
|
|
933
|
+
class="pbx-mySecondaryButton pbx-px-2 pbx-text-xs"
|
|
934
|
+
>
|
|
935
|
+
<span> {{ translate('Styles') }} </span>
|
|
936
|
+
</button>
|
|
937
|
+
</div>
|
|
938
|
+
</div>
|
|
939
|
+
|
|
940
|
+
<aside
|
|
941
|
+
aria-label="Menu"
|
|
942
|
+
id="pagebuilder-right-area"
|
|
943
|
+
:class="{
|
|
944
|
+
'pbx-w-0 pbx-mr-0': !getMenuRight,
|
|
945
|
+
'pbx-w-80 pbx-mr-2 pbx-bg-myPrimaryLightGrayColor pbx-items-stretch': getMenuRight,
|
|
946
|
+
}"
|
|
947
|
+
class="pbx-duration-100 pbx-z-20 pbx-flex-shrink-0 pbx-overflow-hidden pbx-shadow-sm pbx-rounded-l-2xl pbx-h-[100vh]"
|
|
948
|
+
>
|
|
949
|
+
<RightSidebarEditor @closeEditor="pageBuilderStateStore.setMenuRight(false)">
|
|
950
|
+
</RightSidebarEditor>
|
|
951
|
+
</aside>
|
|
952
|
+
</div>
|
|
953
|
+
|
|
954
|
+
<div
|
|
955
|
+
class="pbx-flex pbx-items-center pbx-justify-center pbx-p-4 pbx-border-0 pbx-border-t pbx-border-t-gray-200 pbx-border-solid lg:pbx-mx-10"
|
|
956
|
+
>
|
|
957
|
+
<div
|
|
958
|
+
@click="
|
|
959
|
+
() => {
|
|
960
|
+
pageBuilderStateStore.setComponentArrayAddMethod('push')
|
|
961
|
+
handleAddComponent()
|
|
962
|
+
}
|
|
963
|
+
"
|
|
964
|
+
class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2 pbx-cursor-pointer"
|
|
965
|
+
>
|
|
966
|
+
<span class="lg:pbx-block pbx-hidden">
|
|
967
|
+
<div class="pbx-whitespace-nowrap">{{ translate('Add to the bottom') }}</div>
|
|
968
|
+
</span>
|
|
969
|
+
<div class="pbx-flex pbx-gap-2 pbx-items-center pbx-justify-center">
|
|
970
|
+
<button
|
|
971
|
+
type="button"
|
|
972
|
+
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 hover:pbx-text-white"
|
|
973
|
+
>
|
|
974
|
+
<span class="pbx-myMediumIcon material-symbols-outlined"> interests </span>
|
|
975
|
+
</button>
|
|
979
976
|
</div>
|
|
980
977
|
</div>
|
|
981
978
|
</div>
|