@myissue/vue-website-page-builder 3.2.31 → 3.2.33
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 +1875 -1883
- package/dist/vue-website-page-builder.umd.cjs +4 -4
- package/package.json +1 -1
- package/src/Components/Loaders/FullScreenSpinner.vue +7 -11
- package/src/Components/Modals/MediaLibraryModal.vue +55 -59
- package/src/Components/Modals/PageBuilderPreviewModal.vue +63 -65
- package/src/Components/PageBuilder/Slidebars/SlideOverRight.vue +46 -65
- package/src/Components/PageBuilder/Slidebars/SlideOverRightParent.vue +46 -65
- package/src/DemoComponents/DemoUnsplash.vue +1 -1
package/package.json
CHANGED
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
></div>
|
|
10
|
-
</div>
|
|
11
|
-
</div>
|
|
12
|
-
</teleport>
|
|
2
|
+
<div class="bg-white flex justify-center items-center h-screen w-screen fixed inset-0 z-40">
|
|
3
|
+
<div class="absolute top-1/3">
|
|
4
|
+
<div
|
|
5
|
+
class="inline-block h-10 w-10 animate-spin rounded-full border-4 border-solid border-current border-r-transparent"
|
|
6
|
+
></div>
|
|
7
|
+
</div>
|
|
8
|
+
</div>
|
|
13
9
|
</template>
|
|
@@ -64,72 +64,68 @@ provide('closeMediaLibraryModal', closeMediaLibraryModal)
|
|
|
64
64
|
</script>
|
|
65
65
|
|
|
66
66
|
<template>
|
|
67
|
-
<
|
|
68
|
-
<
|
|
69
|
-
<
|
|
70
|
-
<
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
</TransitionChild>
|
|
67
|
+
<TransitionRoot :show="open" as="template">
|
|
68
|
+
<Dialog as="div" class="fixed z-30 inset-0 overflow-y-auto sm:px-4" @close="firstButton">
|
|
69
|
+
<div class="flex items-end justify-center text-center sm:block sm:p-0">
|
|
70
|
+
<TransitionChild
|
|
71
|
+
as="template"
|
|
72
|
+
enter="ease-out duration-100"
|
|
73
|
+
enter-from="opacity-0"
|
|
74
|
+
enter-to="opacity-100"
|
|
75
|
+
leave="ease-in duration-100"
|
|
76
|
+
leave-from="opacity-100"
|
|
77
|
+
leave-to="opacity-0"
|
|
78
|
+
>
|
|
79
|
+
<DialogOverlay class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
|
80
|
+
</TransitionChild>
|
|
82
81
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
82
|
+
<!-- This element is to trick the browser into centering the modal contents. -->
|
|
83
|
+
<span aria-hidden="true" class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
|
84
|
+
>​</span
|
|
85
|
+
>
|
|
86
|
+
<TransitionChild
|
|
87
|
+
as="template"
|
|
88
|
+
enter="ease-out duration-100"
|
|
89
|
+
enter-from="opacity-0 scale-95"
|
|
90
|
+
enter-to="opacity-100 scale-100"
|
|
91
|
+
leave="ease-in duration-100"
|
|
92
|
+
leave-from="opacity-100 scale-100"
|
|
93
|
+
leave-to="opacity-0 scale-95"
|
|
94
|
+
>
|
|
95
|
+
<div
|
|
96
|
+
class="font-sans relative 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"
|
|
95
97
|
>
|
|
96
|
-
<div
|
|
97
|
-
class="
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
class="flex gap-2 justify-between items-center border-b border-gray-200 p-4 mb-2"
|
|
101
|
-
>
|
|
102
|
-
<DialogTitle as="h3" class="tertiaryHeader my-0 py-0">
|
|
103
|
-
{{ title }}
|
|
104
|
-
</DialogTitle>
|
|
98
|
+
<div class="flex gap-2 justify-between items-center border-b border-gray-200 p-4 mb-2">
|
|
99
|
+
<DialogTitle as="h3" class="tertiaryHeader my-0 py-0">
|
|
100
|
+
{{ title }}
|
|
101
|
+
</DialogTitle>
|
|
105
102
|
|
|
103
|
+
<div class="flex-end">
|
|
106
104
|
<div class="flex-end">
|
|
107
|
-
<
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
>
|
|
114
|
-
|
|
115
|
-
</button>
|
|
116
|
-
</div>
|
|
105
|
+
<button
|
|
106
|
+
type="button"
|
|
107
|
+
class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white hover:fill-white focus-visible:ring-0 text-myPrimaryDarkGrayColor"
|
|
108
|
+
@click="firstButton"
|
|
109
|
+
aria-label="Close"
|
|
110
|
+
>
|
|
111
|
+
<span class="material-symbols-outlined"> close </span>
|
|
112
|
+
</button>
|
|
117
113
|
</div>
|
|
118
114
|
</div>
|
|
115
|
+
</div>
|
|
119
116
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
</div>
|
|
117
|
+
<div class="p-4">
|
|
118
|
+
<!-- Show only custom media component if provided -->
|
|
119
|
+
<div v-if="customMediaComponent" class="w-full">
|
|
120
|
+
<component :is="customMediaComponent" />
|
|
121
|
+
</div>
|
|
122
|
+
<div v-else>
|
|
123
|
+
<DefaultMediaLibraryComponent />
|
|
128
124
|
</div>
|
|
129
125
|
</div>
|
|
130
|
-
</
|
|
131
|
-
</
|
|
132
|
-
</
|
|
133
|
-
</
|
|
134
|
-
</
|
|
126
|
+
</div>
|
|
127
|
+
</TransitionChild>
|
|
128
|
+
</div>
|
|
129
|
+
</Dialog>
|
|
130
|
+
</TransitionRoot>
|
|
135
131
|
</template>
|
|
@@ -36,85 +36,83 @@ const getConfigPageBuilder = computed(() => {
|
|
|
36
36
|
</script>
|
|
37
37
|
|
|
38
38
|
<template>
|
|
39
|
-
<
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
39
|
+
<TransitionRoot :show="show" as="template">
|
|
40
|
+
<Dialog
|
|
41
|
+
@close="firstButton"
|
|
42
|
+
@keydown.escape.prevent="handleEscapeKey"
|
|
43
|
+
as="div"
|
|
44
|
+
class="fixed z-30 inset-0 overflow-y-auto focus:outline-none"
|
|
45
|
+
tabindex="0"
|
|
46
|
+
>
|
|
47
|
+
<div
|
|
48
|
+
class="font-sans flex items-end justify-center pb-20 text-center sm:block sm:p-0 bg-white"
|
|
47
49
|
>
|
|
48
|
-
<
|
|
49
|
-
|
|
50
|
+
<TransitionChild
|
|
51
|
+
as="template"
|
|
52
|
+
enter="ease-out duration-100"
|
|
53
|
+
enter-from="opacity-0"
|
|
54
|
+
enter-to="opacity-100"
|
|
55
|
+
leave="ease-in duration-100"
|
|
56
|
+
leave-from="opacity-100"
|
|
57
|
+
leave-to="opacity-100"
|
|
50
58
|
>
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
enter="ease-out duration-100"
|
|
54
|
-
enter-from="opacity-0"
|
|
55
|
-
enter-to="opacity-100"
|
|
56
|
-
leave="ease-in duration-100"
|
|
57
|
-
leave-from="opacity-100"
|
|
58
|
-
leave-to="opacity-100"
|
|
59
|
-
>
|
|
60
|
-
<DialogOverlay class="fixed inset-0 bg-opacity-75 transition-opacity" />
|
|
61
|
-
</TransitionChild>
|
|
59
|
+
<DialogOverlay class="fixed inset-0 bg-opacity-75 transition-opacity" />
|
|
60
|
+
</TransitionChild>
|
|
62
61
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
62
|
+
<!-- This element is to trick the browser into centering the modal contents. -->
|
|
63
|
+
<span aria-hidden="true" class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
|
64
|
+
>​</span
|
|
65
|
+
>
|
|
66
|
+
<TransitionChild
|
|
67
|
+
as="template"
|
|
68
|
+
enter="ease-out duration-100"
|
|
69
|
+
enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
70
|
+
enter-to="opacity-100 translate-y-0 sm:scale-100"
|
|
71
|
+
leave="ease-in duration-100"
|
|
72
|
+
leave-from="opacity-100 translate-y-0 sm:scale-100"
|
|
73
|
+
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
74
|
+
>
|
|
75
|
+
<div
|
|
76
|
+
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"
|
|
75
77
|
>
|
|
76
78
|
<div
|
|
77
|
-
class="
|
|
79
|
+
class="px-4 lg:h-[10vh] h-[16vh] flex items-center justify-between border-b border-gray-200 bg-white"
|
|
78
80
|
>
|
|
79
81
|
<div
|
|
80
|
-
|
|
82
|
+
v-if="
|
|
83
|
+
getConfigPageBuilder &&
|
|
84
|
+
getConfigPageBuilder.pageBuilderLogo &&
|
|
85
|
+
getConfigPageBuilder.pageBuilderLogo.src
|
|
86
|
+
"
|
|
87
|
+
class="flex items-center divide-x divide-gray-200"
|
|
81
88
|
>
|
|
82
|
-
<div
|
|
83
|
-
|
|
84
|
-
getConfigPageBuilder &&
|
|
85
|
-
getConfigPageBuilder.pageBuilderLogo &&
|
|
86
|
-
getConfigPageBuilder.pageBuilderLogo.src
|
|
87
|
-
"
|
|
88
|
-
class="flex items-center divide-x divide-gray-200"
|
|
89
|
-
>
|
|
90
|
-
<div class="pr-4">
|
|
91
|
-
<img class="h-6" :src="getConfigPageBuilder.pageBuilderLogo.src" alt="Logo" />
|
|
92
|
-
</div>
|
|
93
|
-
<span class="myPrimaryParagraph font-medium pl-4">Preview mode </span>
|
|
89
|
+
<div class="pr-4">
|
|
90
|
+
<img class="h-6" :src="getConfigPageBuilder.pageBuilderLogo.src" alt="Logo" />
|
|
94
91
|
</div>
|
|
95
|
-
<
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
92
|
+
<span class="myPrimaryParagraph font-medium pl-4">Preview mode </span>
|
|
93
|
+
</div>
|
|
94
|
+
<div v-else>
|
|
95
|
+
<div class="pr-6">
|
|
96
|
+
<span class="myPrimaryParagraph font-medium">Preview mode </span>
|
|
99
97
|
</div>
|
|
98
|
+
</div>
|
|
100
99
|
|
|
100
|
+
<div
|
|
101
|
+
@click="firstButton"
|
|
102
|
+
class="flex items-center justify-center gap-1 cursor-pointer"
|
|
103
|
+
>
|
|
104
|
+
<span class="myPrimaryParagraph font-medium"> Close Preview </span>
|
|
101
105
|
<div
|
|
102
|
-
|
|
103
|
-
class="flex items-center justify-center gap-1 cursor-pointer"
|
|
106
|
+
class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
|
|
104
107
|
>
|
|
105
|
-
<span class="
|
|
106
|
-
<div
|
|
107
|
-
class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
|
|
108
|
-
>
|
|
109
|
-
<span class="material-symbols-outlined"> close </span>
|
|
110
|
-
</div>
|
|
108
|
+
<span class="material-symbols-outlined"> close </span>
|
|
111
109
|
</div>
|
|
112
110
|
</div>
|
|
113
|
-
<slot></slot>
|
|
114
111
|
</div>
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
112
|
+
<slot></slot>
|
|
113
|
+
</div>
|
|
114
|
+
</TransitionChild>
|
|
115
|
+
</div>
|
|
116
|
+
</Dialog>
|
|
117
|
+
</TransitionRoot>
|
|
120
118
|
</template>
|
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
<script setup>
|
|
2
|
-
import {
|
|
3
|
-
Dialog,
|
|
4
|
-
DialogPanel,
|
|
5
|
-
DialogTitle,
|
|
6
|
-
TransitionChild,
|
|
7
|
-
TransitionRoot,
|
|
8
|
-
} from '@headlessui/vue';
|
|
2
|
+
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
|
|
9
3
|
|
|
10
4
|
// props
|
|
11
5
|
const props = defineProps({
|
|
@@ -15,77 +9,64 @@ const props = defineProps({
|
|
|
15
9
|
title: {
|
|
16
10
|
required: true,
|
|
17
11
|
},
|
|
18
|
-
})
|
|
12
|
+
})
|
|
19
13
|
|
|
20
14
|
// emit
|
|
21
|
-
const emit = defineEmits(['slideOverButton'])
|
|
15
|
+
const emit = defineEmits(['slideOverButton'])
|
|
22
16
|
|
|
23
17
|
// button
|
|
24
18
|
const slideOverButton = function () {
|
|
25
|
-
emit('slideOverButton')
|
|
26
|
-
}
|
|
19
|
+
emit('slideOverButton')
|
|
20
|
+
}
|
|
27
21
|
</script>
|
|
28
22
|
|
|
29
23
|
<template>
|
|
30
|
-
<
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
:show="open"
|
|
34
|
-
>
|
|
35
|
-
<Dialog
|
|
36
|
-
as="div"
|
|
37
|
-
class="relative z-40"
|
|
38
|
-
@click="$emit('slideOverButton')"
|
|
39
|
-
>
|
|
40
|
-
<div class="fixed inset-0" />
|
|
24
|
+
<TransitionRoot as="template" :show="open">
|
|
25
|
+
<Dialog as="div" class="relative z-40" @click="$emit('slideOverButton')">
|
|
26
|
+
<div class="fixed inset-0" />
|
|
41
27
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
28
|
+
<div class="fixed inset-0 overflow-hidden">
|
|
29
|
+
<div class="absolute inset-0 overflow-hidden">
|
|
30
|
+
<div
|
|
31
|
+
class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 justify-end"
|
|
32
|
+
>
|
|
33
|
+
<TransitionChild
|
|
34
|
+
as="template"
|
|
35
|
+
enter="transform transition ease-in-out duration-200 sm:duration-200"
|
|
36
|
+
enter-from="translate-x-full"
|
|
37
|
+
enter-to="translate-x-0"
|
|
38
|
+
leave="transform transition ease-in-out duration-200 sm:duration-200"
|
|
39
|
+
leave-from="translate-x-0"
|
|
40
|
+
leave-to="translate-x-full"
|
|
46
41
|
>
|
|
47
|
-
<
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
<div class="flex items-center justify-between">
|
|
62
|
-
<DialogTitle class="myTertiaryHeader my-0">
|
|
63
|
-
{{ title }}
|
|
64
|
-
</DialogTitle>
|
|
65
|
-
<div class="ml-3 flex h-7 items-center">
|
|
66
|
-
<button
|
|
67
|
-
@click="$emit('slideOverButton')"
|
|
68
|
-
class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
|
|
69
|
-
>
|
|
70
|
-
<span class="material-symbols-outlined">
|
|
71
|
-
close
|
|
72
|
-
</span>
|
|
73
|
-
</button>
|
|
74
|
-
</div>
|
|
75
|
-
</div>
|
|
76
|
-
<div class="md:mt-6 mt-4">
|
|
77
|
-
<!-- Replace with your content -->
|
|
78
|
-
<slot></slot>
|
|
79
|
-
<!-- /End replace -->
|
|
42
|
+
<DialogPanel class="pointer-events-auto w-96 max-w-md">
|
|
43
|
+
<div class="flex h-full flex-col overflow-y-scroll bg-white pt-8 pb-6 shadow-xl">
|
|
44
|
+
<div class="pl-4 pr-2">
|
|
45
|
+
<div class="flex items-center justify-between">
|
|
46
|
+
<DialogTitle class="myTertiaryHeader my-0">
|
|
47
|
+
{{ title }}
|
|
48
|
+
</DialogTitle>
|
|
49
|
+
<div class="ml-3 flex h-7 items-center">
|
|
50
|
+
<button
|
|
51
|
+
@click="$emit('slideOverButton')"
|
|
52
|
+
class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
|
|
53
|
+
>
|
|
54
|
+
<span class="material-symbols-outlined"> close </span>
|
|
55
|
+
</button>
|
|
80
56
|
</div>
|
|
81
57
|
</div>
|
|
58
|
+
<div class="md:mt-6 mt-4">
|
|
59
|
+
<!-- Replace with your content -->
|
|
60
|
+
<slot></slot>
|
|
61
|
+
<!-- /End replace -->
|
|
62
|
+
</div>
|
|
82
63
|
</div>
|
|
83
|
-
</
|
|
84
|
-
</
|
|
85
|
-
</
|
|
64
|
+
</div>
|
|
65
|
+
</DialogPanel>
|
|
66
|
+
</TransitionChild>
|
|
86
67
|
</div>
|
|
87
68
|
</div>
|
|
88
|
-
</
|
|
89
|
-
</
|
|
90
|
-
</
|
|
69
|
+
</div>
|
|
70
|
+
</Dialog>
|
|
71
|
+
</TransitionRoot>
|
|
91
72
|
</template>
|
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
<script setup>
|
|
2
|
-
import {
|
|
3
|
-
Dialog,
|
|
4
|
-
DialogPanel,
|
|
5
|
-
DialogTitle,
|
|
6
|
-
TransitionChild,
|
|
7
|
-
TransitionRoot,
|
|
8
|
-
} from '@headlessui/vue';
|
|
2
|
+
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
|
|
9
3
|
|
|
10
4
|
// props
|
|
11
5
|
const props = defineProps({
|
|
@@ -15,77 +9,64 @@ const props = defineProps({
|
|
|
15
9
|
title: {
|
|
16
10
|
required: true,
|
|
17
11
|
},
|
|
18
|
-
})
|
|
12
|
+
})
|
|
19
13
|
|
|
20
14
|
// emit
|
|
21
|
-
const emit = defineEmits(['slideOverButton'])
|
|
15
|
+
const emit = defineEmits(['slideOverButton'])
|
|
22
16
|
|
|
23
17
|
// button
|
|
24
18
|
const slideOverButton = function () {
|
|
25
|
-
emit('slideOverButton')
|
|
26
|
-
}
|
|
19
|
+
emit('slideOverButton')
|
|
20
|
+
}
|
|
27
21
|
</script>
|
|
28
22
|
|
|
29
23
|
<template>
|
|
30
|
-
<
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
:show="open"
|
|
34
|
-
>
|
|
35
|
-
<Dialog
|
|
36
|
-
as="div"
|
|
37
|
-
class="relative z-40"
|
|
38
|
-
@click="$emit('slideOverButton')"
|
|
39
|
-
>
|
|
40
|
-
<div class="fixed inset-0" />
|
|
24
|
+
<TransitionRoot as="template" :show="open">
|
|
25
|
+
<Dialog as="div" class="relative z-40" @click="$emit('slideOverButton')">
|
|
26
|
+
<div class="fixed inset-0" />
|
|
41
27
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
28
|
+
<div class="fixed inset-0 overflow-hidden">
|
|
29
|
+
<div class="absolute inset-0 overflow-hidden">
|
|
30
|
+
<div
|
|
31
|
+
class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 justify-end"
|
|
32
|
+
>
|
|
33
|
+
<TransitionChild
|
|
34
|
+
as="template"
|
|
35
|
+
enter="transform transition ease-in-out duration-200 sm:duration-200"
|
|
36
|
+
enter-from="translate-x-full"
|
|
37
|
+
enter-to="translate-x-0"
|
|
38
|
+
leave="transform transition ease-in-out duration-200 sm:duration-200"
|
|
39
|
+
leave-from="translate-x-0"
|
|
40
|
+
leave-to="translate-x-full"
|
|
46
41
|
>
|
|
47
|
-
<
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
<div class="flex items-center justify-between">
|
|
62
|
-
<DialogTitle class="myTertiaryHeader my-0">
|
|
63
|
-
{{ title }}
|
|
64
|
-
</DialogTitle>
|
|
65
|
-
<div class="ml-3 flex h-7 items-center">
|
|
66
|
-
<button
|
|
67
|
-
@click="$emit('slideOverButton')"
|
|
68
|
-
class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
|
|
69
|
-
>
|
|
70
|
-
<span class="material-symbols-outlined">
|
|
71
|
-
close
|
|
72
|
-
</span>
|
|
73
|
-
</button>
|
|
74
|
-
</div>
|
|
75
|
-
</div>
|
|
76
|
-
<div class="md:mt-6 mt-4">
|
|
77
|
-
<!-- Replace with your content -->
|
|
78
|
-
<slot></slot>
|
|
79
|
-
<!-- /End replace -->
|
|
42
|
+
<DialogPanel class="pointer-events-auto w-96 max-w-md">
|
|
43
|
+
<div class="flex h-full flex-col overflow-y-scroll bg-white pt-8 pb-6 shadow-xl">
|
|
44
|
+
<div class="pl-4 pr-2">
|
|
45
|
+
<div class="flex items-center justify-between">
|
|
46
|
+
<DialogTitle class="myTertiaryHeader my-0">
|
|
47
|
+
{{ title }}
|
|
48
|
+
</DialogTitle>
|
|
49
|
+
<div class="ml-3 flex h-7 items-center">
|
|
50
|
+
<button
|
|
51
|
+
@click="$emit('slideOverButton')"
|
|
52
|
+
class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
|
|
53
|
+
>
|
|
54
|
+
<span class="material-symbols-outlined"> close </span>
|
|
55
|
+
</button>
|
|
80
56
|
</div>
|
|
81
57
|
</div>
|
|
58
|
+
<div class="md:mt-6 mt-4">
|
|
59
|
+
<!-- Replace with your content -->
|
|
60
|
+
<slot></slot>
|
|
61
|
+
<!-- /End replace -->
|
|
62
|
+
</div>
|
|
82
63
|
</div>
|
|
83
|
-
</
|
|
84
|
-
</
|
|
85
|
-
</
|
|
64
|
+
</div>
|
|
65
|
+
</DialogPanel>
|
|
66
|
+
</TransitionChild>
|
|
86
67
|
</div>
|
|
87
68
|
</div>
|
|
88
|
-
</
|
|
89
|
-
</
|
|
90
|
-
</
|
|
69
|
+
</div>
|
|
70
|
+
</Dialog>
|
|
71
|
+
</TransitionRoot>
|
|
91
72
|
</template>
|
|
@@ -100,7 +100,7 @@ const nextPage = async function () {
|
|
|
100
100
|
|
|
101
101
|
const applySelectedImage = async function (imageURL) {
|
|
102
102
|
// Ensure the current image is set in the store with proper structure
|
|
103
|
-
|
|
103
|
+
pageBuilderStateStore.setCurrentImage({
|
|
104
104
|
src: `${imageURL}`,
|
|
105
105
|
})
|
|
106
106
|
|