@myissue/vue-website-page-builder 3.0.28 → 3.0.30
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/vue-website-page-builder.css +1 -1
- package/dist/vue-website-page-builder.js +1449 -1447
- package/dist/vue-website-page-builder.umd.cjs +27 -27
- package/package.json +1 -1
- package/src/Components/Modals/DynamicModal.vue +1 -1
- package/src/Components/Modals/MediaLibraryModal.vue +1 -1
- package/src/Components/Modals/Modal.vue +78 -88
- package/src/Components/Modals/PageBuilderPreviewModal.vue +9 -5
- package/src/Components/Search/SearchComponents.vue +1 -1
- package/src/PageBuilder/PageBuilder.vue +1 -1
- package/src/css/app.css +1 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@myissue/vue-website-page-builder",
|
|
3
|
-
"version": "v3.0.
|
|
3
|
+
"version": "v3.0.30",
|
|
4
4
|
"description": "🚧 DEVELOPMENT VERSION - Vue.js page builder component with drag & drop functionality. Not ready for production use.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/vue-website-page-builder.umd.cjs",
|
|
@@ -80,7 +80,7 @@ const thirdButton = function () {
|
|
|
80
80
|
<slot name="content" />
|
|
81
81
|
|
|
82
82
|
<div
|
|
83
|
-
class="w-full relative inline-block align-bottom text-left overflow-hidden transform transition-all sm:align-middle"
|
|
83
|
+
class="font-sans w-full relative inline-block align-bottom text-left overflow-hidden transform transition-all sm:align-middle"
|
|
84
84
|
>
|
|
85
85
|
<template v-if="simpleModal !== true">
|
|
86
86
|
<div class="flex items-center border-b border-gray-200 p-4 mb-2">
|
|
@@ -94,7 +94,7 @@ provide('closeMediaLibraryModal', closeMediaLibraryModal)
|
|
|
94
94
|
leave-to="opacity-0 scale-95"
|
|
95
95
|
>
|
|
96
96
|
<div
|
|
97
|
-
class="relative max-h-[65rem] my-2 inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:align-middle sm:max-w-7xl sm:w-full w-[96%]"
|
|
97
|
+
class="font-sans relative max-h-[65rem] my-2 inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:align-middle sm:max-w-7xl sm:w-full w-[96%]"
|
|
98
98
|
>
|
|
99
99
|
<div
|
|
100
100
|
class="flex gap-2 justify-between items-center border-b border-gray-200 p-4 mb-2"
|
|
@@ -1,102 +1,92 @@
|
|
|
1
1
|
<script setup>
|
|
2
|
-
import { computed, onMounted, onUnmounted, watch } from
|
|
2
|
+
import { computed, onMounted, onUnmounted, watch } from 'vue'
|
|
3
3
|
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
} from
|
|
4
|
+
Dialog,
|
|
5
|
+
DialogOverlay,
|
|
6
|
+
DialogTitle,
|
|
7
|
+
TransitionChild,
|
|
8
|
+
TransitionRoot,
|
|
9
|
+
} from '@headlessui/vue'
|
|
10
10
|
|
|
11
11
|
const props = defineProps({
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
})
|
|
12
|
+
show: {
|
|
13
|
+
type: Boolean,
|
|
14
|
+
default: false,
|
|
15
|
+
},
|
|
16
|
+
maxWidth: {
|
|
17
|
+
type: String,
|
|
18
|
+
default: '2xl',
|
|
19
|
+
},
|
|
20
|
+
minHeight: {
|
|
21
|
+
type: String,
|
|
22
|
+
},
|
|
23
|
+
maxHeight: {
|
|
24
|
+
type: String,
|
|
25
|
+
},
|
|
26
|
+
})
|
|
27
27
|
|
|
28
|
-
const emit = defineEmits([
|
|
28
|
+
const emit = defineEmits(['close'])
|
|
29
29
|
|
|
30
30
|
const close = () => {
|
|
31
|
-
|
|
32
|
-
}
|
|
31
|
+
emit('close')
|
|
32
|
+
}
|
|
33
33
|
|
|
34
34
|
const maxWidthClass = computed(() => {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
})
|
|
35
|
+
return {
|
|
36
|
+
sm: 'sm:max-w-sm',
|
|
37
|
+
md: 'sm:max-w-md',
|
|
38
|
+
lg: 'sm:max-w-lg',
|
|
39
|
+
xl: 'sm:max-w-xl',
|
|
40
|
+
'2xl': 'sm:max-w-2xl',
|
|
41
|
+
'3xl': 'sm:max-w-3xl',
|
|
42
|
+
'4xl': 'sm:max-w-4xl',
|
|
43
|
+
'5xl': 'sm:max-w-5xl',
|
|
44
|
+
}[props.maxWidth]
|
|
45
|
+
})
|
|
46
46
|
</script>
|
|
47
47
|
|
|
48
48
|
<template>
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
49
|
+
<teleport to="body">
|
|
50
|
+
<TransitionRoot :show="show" as="template">
|
|
51
|
+
<Dialog as="div" class="font-sans fixed z-30 inset-0 overflow-y-auto" @close="close">
|
|
52
|
+
<div class="flex items-end justify-center text-center sm:block sm:p-0">
|
|
53
|
+
<TransitionChild
|
|
54
|
+
as="template"
|
|
55
|
+
enter="ease-out duration-100"
|
|
56
|
+
enter-from="opacity-0"
|
|
57
|
+
enter-to="opacity-100"
|
|
58
|
+
leave="ease-in duration-100"
|
|
59
|
+
leave-from="opacity-100"
|
|
60
|
+
leave-to="opacity-0"
|
|
61
|
+
>
|
|
62
|
+
<DialogOverlay class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
|
63
|
+
</TransitionChild>
|
|
64
|
+
<!-- This element is to trick the browser into centering the modal contents. -->
|
|
65
|
+
<span aria-hidden="true" class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
|
66
|
+
>​</span
|
|
67
|
+
>
|
|
68
|
+
<TransitionChild
|
|
69
|
+
as="template"
|
|
70
|
+
enter="ease-out duration-100"
|
|
71
|
+
enter-from="opacity-0 scale-95"
|
|
72
|
+
enter-to="opacity-100 scale-100"
|
|
73
|
+
leave="ease-in duration-100"
|
|
74
|
+
leave-from="opacity-100 scale-100"
|
|
75
|
+
leave-to="opacity-0 scale-95"
|
|
76
|
+
>
|
|
77
|
+
<div
|
|
78
|
+
class="relative inline-block align-bottom bg-white rounded-xl text-left overflow-hidden shadow-xl transform transition-all sm:align-top top-4 sm:w-full w-[96%]"
|
|
79
|
+
:class="[
|
|
80
|
+
maxWidthClass ? maxWidthClass : '',
|
|
81
|
+
minHeight ? minHeight : '',
|
|
82
|
+
maxHeight ? maxHeight : '',
|
|
83
|
+
]"
|
|
55
84
|
>
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
enter-to="opacity-100"
|
|
64
|
-
leave="ease-in duration-100"
|
|
65
|
-
leave-from="opacity-100"
|
|
66
|
-
leave-to="opacity-0"
|
|
67
|
-
>
|
|
68
|
-
<DialogOverlay
|
|
69
|
-
class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
|
|
70
|
-
/>
|
|
71
|
-
</TransitionChild>
|
|
72
|
-
<!-- This element is to trick the browser into centering the modal contents. -->
|
|
73
|
-
<span
|
|
74
|
-
aria-hidden="true"
|
|
75
|
-
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
|
76
|
-
>​</span
|
|
77
|
-
>
|
|
78
|
-
<TransitionChild
|
|
79
|
-
as="template"
|
|
80
|
-
enter="ease-out duration-100"
|
|
81
|
-
enter-from="opacity-0 scale-95"
|
|
82
|
-
enter-to="opacity-100 scale-100"
|
|
83
|
-
leave="ease-in duration-100"
|
|
84
|
-
leave-from="opacity-100 scale-100"
|
|
85
|
-
leave-to="opacity-0 scale-95"
|
|
86
|
-
>
|
|
87
|
-
<div
|
|
88
|
-
class="relative inline-block align-bottom bg-white rounded-xl text-left overflow-hidden shadow-xl transform transition-all sm:align-top top-4 sm:w-full w-[96%]"
|
|
89
|
-
:class="[
|
|
90
|
-
maxWidthClass ? maxWidthClass : '',
|
|
91
|
-
minHeight ? minHeight : '',
|
|
92
|
-
maxHeight ? maxHeight : '',
|
|
93
|
-
]"
|
|
94
|
-
>
|
|
95
|
-
<slot></slot>
|
|
96
|
-
</div>
|
|
97
|
-
</TransitionChild>
|
|
98
|
-
</div>
|
|
99
|
-
</Dialog>
|
|
100
|
-
</TransitionRoot>
|
|
101
|
-
</teleport>
|
|
85
|
+
<slot></slot>
|
|
86
|
+
</div>
|
|
87
|
+
</TransitionChild>
|
|
88
|
+
</div>
|
|
89
|
+
</Dialog>
|
|
90
|
+
</TransitionRoot>
|
|
91
|
+
</teleport>
|
|
102
92
|
</template>
|
|
@@ -48,7 +48,9 @@ const handleEscapeKey = function () {
|
|
|
48
48
|
class="fixed z-30 inset-0 overflow-y-auto focus:outline-none"
|
|
49
49
|
tabindex="0"
|
|
50
50
|
>
|
|
51
|
-
<div
|
|
51
|
+
<div
|
|
52
|
+
class="font-sans flex items-end justify-center pb-20 text-center sm:block sm:p-0 bg-white"
|
|
53
|
+
>
|
|
52
54
|
<TransitionChild
|
|
53
55
|
as="template"
|
|
54
56
|
enter="ease-out duration-100"
|
|
@@ -78,11 +80,13 @@ const handleEscapeKey = function () {
|
|
|
78
80
|
class="bg-red-100 inline-block align-bottom text-left transform transition-all sm:align-middle w-full overflow-hidden h-[100vh] top-0 left-0 right-0 absolute"
|
|
79
81
|
>
|
|
80
82
|
<div
|
|
81
|
-
class="px-4
|
|
83
|
+
class="px-4 lg:h-[10vh] h-[16vh] flex items-center justify-between border-b border-gray-200 bg-white"
|
|
82
84
|
>
|
|
83
|
-
<
|
|
84
|
-
<
|
|
85
|
-
|
|
85
|
+
<template v-if="getPageBuilderLogo">
|
|
86
|
+
<div class="border-r border-gray-200 pr-6">
|
|
87
|
+
<img class="h-6" :src="getPageBuilderLogo" alt="Logo" />
|
|
88
|
+
</div>
|
|
89
|
+
</template>
|
|
86
90
|
<div
|
|
87
91
|
@click="firstButton"
|
|
88
92
|
class="flex items-center justify-center gap-1 cursor-pointer"
|
|
@@ -30,7 +30,7 @@ const firstButton = function () {
|
|
|
30
30
|
<template>
|
|
31
31
|
<Modal maxWidth="5xl" :show="show" @close="firstButton" minHeight="" maxHeight="">
|
|
32
32
|
<div
|
|
33
|
-
class="w-full relative inline-block align-bottom text-left overflow-hidden transform transition-all sm:align-middle"
|
|
33
|
+
class="font-sans w-full relative inline-block align-bottom text-left overflow-hidden transform transition-all sm:align-middle"
|
|
34
34
|
>
|
|
35
35
|
<div class="flex items-center border-b border-gray-200 p-4 mb-2">
|
|
36
36
|
<div class="flex-1">
|
package/src/css/app.css
CHANGED
|
@@ -566,17 +566,14 @@ h3 {
|
|
|
566
566
|
/* CSS for Vue datepicker # start */
|
|
567
567
|
:root {
|
|
568
568
|
/*General*/
|
|
569
|
-
--dp-font-family:
|
|
570
|
-
'Jost', blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, 'Open Sans',
|
|
571
|
-
'Helvetica Neue', sans-serif !important;
|
|
572
569
|
--dp-border-radius: 40px; /*Configurable border-radius*/
|
|
573
570
|
--dp-cell-border-radius: 4px; /*Specific border radius for the calendar cell*/
|
|
574
571
|
--dp-common-transition: all 0.1s ease-in; /*Generic transition applied on buttons and calendar cells*/
|
|
575
572
|
}
|
|
576
573
|
|
|
577
574
|
#builder-container {
|
|
578
|
-
font-family: 'Jost', sans-serif;
|
|
579
575
|
}
|
|
576
|
+
|
|
580
577
|
.dp__action_row {
|
|
581
578
|
display: flex !important;
|
|
582
579
|
align-items: center !important;
|