@myissue/vue-website-page-builder 3.2.29 → 3.2.31
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 +31 -0
- package/dist/vue-website-page-builder.js +332 -330
- package/dist/vue-website-page-builder.umd.cjs +4 -4
- package/package.json +2 -2
- package/src/Components/Modals/BuilderComponents.vue +4 -2
- package/src/Components/Modals/MediaLibraryModal.vue +5 -3
- package/src/Components/Modals/ModalBuilder.vue +40 -42
- package/src/DemoComponents/html.json +1 -1
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@myissue/vue-website-page-builder",
|
|
3
|
-
"version": "v3.2.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "v3.2.31",
|
|
4
|
+
"description": "Vue 3 page builder component with drag & drop functionality.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/vue-website-page-builder.umd.cjs",
|
|
7
7
|
"module": "./dist/vue-website-page-builder.js",
|
|
@@ -44,12 +44,14 @@ const firstButtonBuilder = function () {
|
|
|
44
44
|
{{ title }}
|
|
45
45
|
</h3>
|
|
46
46
|
</div>
|
|
47
|
-
<
|
|
47
|
+
<button
|
|
48
|
+
type="button"
|
|
48
49
|
class="h-10 w-10 flex-start 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"
|
|
49
50
|
@click="firstButtonBuilder"
|
|
51
|
+
aria-label="Close"
|
|
50
52
|
>
|
|
51
53
|
<span class="material-symbols-outlined"> close </span>
|
|
52
|
-
</
|
|
54
|
+
</button>
|
|
53
55
|
</div>
|
|
54
56
|
|
|
55
57
|
<div class="p-4">
|
|
@@ -58,7 +58,7 @@ const thirdButton = function () {
|
|
|
58
58
|
|
|
59
59
|
// Provide close function for custom components
|
|
60
60
|
const closeMediaLibraryModal = () => {
|
|
61
|
-
firstButton()
|
|
61
|
+
firstButton()
|
|
62
62
|
}
|
|
63
63
|
provide('closeMediaLibraryModal', closeMediaLibraryModal)
|
|
64
64
|
</script>
|
|
@@ -105,12 +105,14 @@ provide('closeMediaLibraryModal', closeMediaLibraryModal)
|
|
|
105
105
|
|
|
106
106
|
<div class="flex-end">
|
|
107
107
|
<div class="flex-end">
|
|
108
|
-
<
|
|
108
|
+
<button
|
|
109
|
+
type="button"
|
|
109
110
|
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"
|
|
110
111
|
@click="firstButton"
|
|
112
|
+
aria-label="Close"
|
|
111
113
|
>
|
|
112
114
|
<span class="material-symbols-outlined"> close </span>
|
|
113
|
-
</
|
|
115
|
+
</button>
|
|
114
116
|
</div>
|
|
115
117
|
</div>
|
|
116
118
|
</div>
|
|
@@ -40,47 +40,45 @@ const maxWidthClass = computed(() => {
|
|
|
40
40
|
</script>
|
|
41
41
|
|
|
42
42
|
<template>
|
|
43
|
-
<
|
|
44
|
-
<
|
|
45
|
-
<
|
|
46
|
-
<
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
43
|
+
<TransitionRoot :show="showModalBuilder" as="template">
|
|
44
|
+
<Dialog as="div" class="font-sans fixed z-30 inset-0 overflow-y-auto" @close="handleClose">
|
|
45
|
+
<div class="flex items-end justify-center text-center sm:block sm:p-0">
|
|
46
|
+
<TransitionChild
|
|
47
|
+
as="template"
|
|
48
|
+
enter="ease-out duration-100"
|
|
49
|
+
enter-from="opacity-0"
|
|
50
|
+
enter-to="opacity-100"
|
|
51
|
+
leave="ease-in duration-100"
|
|
52
|
+
leave-from="opacity-100"
|
|
53
|
+
leave-to="opacity-0"
|
|
54
|
+
>
|
|
55
|
+
<DialogOverlay class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
|
56
|
+
</TransitionChild>
|
|
57
|
+
<!-- This element is to trick the browser into centering the modal contents. -->
|
|
58
|
+
<span aria-hidden="true" class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
|
59
|
+
>​</span
|
|
60
|
+
>
|
|
61
|
+
<TransitionChild
|
|
62
|
+
as="template"
|
|
63
|
+
enter="ease-out duration-100"
|
|
64
|
+
enter-from="opacity-0 scale-95"
|
|
65
|
+
enter-to="opacity-100 scale-100"
|
|
66
|
+
leave="ease-in duration-100"
|
|
67
|
+
leave-from="opacity-100 scale-100"
|
|
68
|
+
leave-to="opacity-0 scale-95"
|
|
69
|
+
>
|
|
70
|
+
<div
|
|
71
|
+
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%]"
|
|
72
|
+
:class="[
|
|
73
|
+
maxWidthClass ? maxWidthClass : '',
|
|
74
|
+
minHeight ? minHeight : '',
|
|
75
|
+
maxHeight ? maxHeight : '',
|
|
76
|
+
]"
|
|
55
77
|
>
|
|
56
|
-
<
|
|
57
|
-
</
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
<TransitionChild
|
|
63
|
-
as="template"
|
|
64
|
-
enter="ease-out duration-100"
|
|
65
|
-
enter-from="opacity-0 scale-95"
|
|
66
|
-
enter-to="opacity-100 scale-100"
|
|
67
|
-
leave="ease-in duration-100"
|
|
68
|
-
leave-from="opacity-100 scale-100"
|
|
69
|
-
leave-to="opacity-0 scale-95"
|
|
70
|
-
>
|
|
71
|
-
<div
|
|
72
|
-
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%]"
|
|
73
|
-
:class="[
|
|
74
|
-
maxWidthClass ? maxWidthClass : '',
|
|
75
|
-
minHeight ? minHeight : '',
|
|
76
|
-
maxHeight ? maxHeight : '',
|
|
77
|
-
]"
|
|
78
|
-
>
|
|
79
|
-
<slot></slot>
|
|
80
|
-
</div>
|
|
81
|
-
</TransitionChild>
|
|
82
|
-
</div>
|
|
83
|
-
</Dialog>
|
|
84
|
-
</TransitionRoot>
|
|
85
|
-
</teleport>
|
|
78
|
+
<slot></slot>
|
|
79
|
+
</div>
|
|
80
|
+
</TransitionChild>
|
|
81
|
+
</div>
|
|
82
|
+
</Dialog>
|
|
83
|
+
</TransitionRoot>
|
|
86
84
|
</template>
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"title": "Header H2"
|
|
6
6
|
},
|
|
7
7
|
{
|
|
8
|
-
"html_code": "<section data-componentid=\"44244178-e183-4439-8150-6a2fdb2dfb72\">\n <div class=\"relative py-4\">\n <div class=\"mx-auto max-w-7xl lg:px-4 px-2\">\n <div><p>Introducing the The Lightweight Free Vue Click & Drop Page Builder create and enhance digital experiences with Vue. Lightweight & Minimalist Page Builder with an elegant and intuitive design, focused on simplicity and speed. Build responsive pages like listings, jobs or blog posts and manage content easily using the free Click & Drop Page Builder.</p></div>\n </div>\n </div>\n </section>",
|
|
8
|
+
"html_code": "<section data-componentid=\"44244178-e183-4439-8150-6a2fdb2dfb72\">\n <div class=\"relative py-4\">\n <div class=\"mx-auto max-w-7xl lg:px-4 px-2\">\n <div><p>Introducing the The Lightweight Free Vue Click & Drop Page Builder create and enhance digital experiences with Vue. Not everything powerful has to look complicated. Lightweight & Minimalist Page Builder with an elegant and intuitive design, focused on simplicity and speed. Build responsive pages like listings, jobs or blog posts and manage content easily using the free Click & Drop Page Builder.</p></div>\n </div>\n </div>\n </section>",
|
|
9
9
|
"id": "44244178-e183-4439-8150-6a2fdb2dfb72",
|
|
10
10
|
"title": "Text"
|
|
11
11
|
},
|