@myissue/vue-website-page-builder 3.3.86 → 3.3.87
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 +501 -502
- package/dist/vue-website-page-builder.umd.cjs +7 -7
- package/package.json +1 -1
- package/src/Components/Modals/BuilderComponents.vue +1 -1
- package/src/Components/Modals/ModalBuilder.vue +1 -1
- package/src/tests/DefaultComponents/DefaultBuilderComponents.vue +75 -67
- package/src/tests/TestComponents/DemoUnsplash.vue +252 -241
package/package.json
CHANGED
|
@@ -44,7 +44,7 @@ const firstButtonBuilder = function () {
|
|
|
44
44
|
<div v-if="CustomBuilderComponents">
|
|
45
45
|
<component :is="CustomBuilderComponents" />
|
|
46
46
|
</div>
|
|
47
|
-
<div
|
|
47
|
+
<div v-else>
|
|
48
48
|
<DefaultBuilderComponents :customMediaComponent="customMediaComponent" />
|
|
49
49
|
</div>
|
|
50
50
|
</div>
|
|
@@ -72,7 +72,7 @@ const maxWidthClass = computed(() => {
|
|
|
72
72
|
></div>
|
|
73
73
|
|
|
74
74
|
<div
|
|
75
|
-
class="pbx-relative pbx-inline-block pbx-bg-white pbx-rounded-xl pbx-text-left pbx-overflow-hidden pbx-shadow-xl pbx-transform pbx-transition-all pbx-max-w-[96vh] lg:pbx-max-h-[98vh] pbx-max-h-[85vh] pbx-
|
|
75
|
+
class="pbx-relative pbx-inline-block pbx-bg-white pbx-rounded-xl pbx-text-left pbx-overflow-hidden pbx-shadow-xl pbx-transform pbx-transition-all pbx-max-w-[96vh] lg:pbx-max-h-[98vh] pbx-max-h-[85vh] pbx-overflow-y-scroll pbx-w-full"
|
|
76
76
|
:class="[
|
|
77
77
|
maxWidthClass ? maxWidthClass : '',
|
|
78
78
|
minHeight ? minHeight : '',
|
|
@@ -95,88 +95,96 @@ const getSvgPreview = (title: string) => {
|
|
|
95
95
|
</style>
|
|
96
96
|
|
|
97
97
|
<template>
|
|
98
|
-
<div
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
98
|
+
<div>
|
|
99
|
+
<template v-if="isLoading">
|
|
100
|
+
<div class="pbx-min-h-[85vh] pbx-h-[85vh]">
|
|
101
|
+
<div class="pbx-flex pbx-items-center pbx-justify-center">
|
|
102
|
+
<div
|
|
103
|
+
class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
|
|
104
|
+
>
|
|
105
|
+
<span
|
|
106
|
+
class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"
|
|
107
|
+
>{{ translate('Loading...') }}</span
|
|
108
|
+
>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
</template>
|
|
113
|
+
<div v-if="!isLoading">
|
|
114
|
+
<!-- Helper Components Section -->
|
|
115
|
+
<div class="pbx-mb-8">
|
|
116
|
+
<h3 class="pbx-myQuaternaryHeader pbx-mb-4">{{ translate('Helper Components') }}</h3>
|
|
105
117
|
<div
|
|
106
|
-
|
|
107
|
-
:key="helper.title"
|
|
108
|
-
class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer pbx-p-4"
|
|
109
|
-
@click="handleDropComponent(helper)"
|
|
118
|
+
class="pbx-px-2 pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 lg:pbx-grid-cols-4 pbx-gap-4"
|
|
110
119
|
>
|
|
111
|
-
<div
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
+
<div
|
|
121
|
+
v-for="helper in componentHelpers"
|
|
122
|
+
:key="helper.title"
|
|
123
|
+
class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer pbx-p-4"
|
|
124
|
+
@click="handleDropComponent(helper)"
|
|
125
|
+
>
|
|
126
|
+
<div
|
|
127
|
+
class="pbx-max-h-72 pbx-cursor-pointer pbx-object-contain pbx-bg-white pbx-mx-auto"
|
|
128
|
+
>
|
|
129
|
+
<div v-if="false" class="pbx-mr-2" v-html="helper.icon"></div>
|
|
130
|
+
<h4 class="pbx-myPrimaryParagraph pbx-text-base pbx-font-medium">
|
|
131
|
+
{{ translate(helper.title) }}
|
|
132
|
+
</h4>
|
|
133
|
+
</div>
|
|
134
|
+
<div class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-pt-2">
|
|
135
|
+
{{ translate('Click to add') }} {{ helper.title.toLowerCase() }}
|
|
136
|
+
{{ translate('component') }}
|
|
137
|
+
</div>
|
|
120
138
|
</div>
|
|
121
139
|
</div>
|
|
122
140
|
</div>
|
|
123
|
-
</div>
|
|
124
141
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
<div class="pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 pbx-gap-4">
|
|
142
|
+
<!-- Regular Components Section -->
|
|
143
|
+
<div class="pbx-px-2" v-if="customMediaComponent">
|
|
144
|
+
<h3 class="pbx-myQuaternaryHeader pbx-mb-4">{{ translate('Layout Components') }}</h3>
|
|
145
|
+
<div class="pbx-mb-4 pbx-flex pbx-jusitify-left pbx-items-center pbx-gap-2">
|
|
146
|
+
<button
|
|
147
|
+
v-for="category in categories"
|
|
148
|
+
:key="category"
|
|
149
|
+
@click="selectedCategory = category"
|
|
150
|
+
class="pbx-mySecondaryButton pbx-px-2 pbx-text-xs"
|
|
151
|
+
:class="{ active: selectedCategory === category }"
|
|
152
|
+
>
|
|
153
|
+
{{ translate(category) }}
|
|
154
|
+
</button>
|
|
155
|
+
</div>
|
|
140
156
|
<div
|
|
141
|
-
|
|
142
|
-
:key="comp.title"
|
|
143
|
-
class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer"
|
|
144
|
-
@click="handleDropComponent(convertToComponentObject(comp))"
|
|
157
|
+
class="pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 pbx-gap-4 pbx-pb-4"
|
|
145
158
|
>
|
|
146
159
|
<div
|
|
147
|
-
|
|
160
|
+
v-for="comp in filteredComponents"
|
|
161
|
+
:key="comp.title"
|
|
162
|
+
class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer"
|
|
163
|
+
@click="handleDropComponent(convertToComponentObject(comp))"
|
|
148
164
|
>
|
|
149
|
-
<!-- Use SVG preview instead of external images -->
|
|
150
165
|
<div
|
|
151
|
-
class="pbx-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
</
|
|
159
|
-
<div class="pbx-
|
|
160
|
-
|
|
166
|
+
class="pbx-overflow-hidden pbx-whitespace-pre-line pbx-flex-1 pbx-h-auto pbx-border-solid pbx-border-b pbx-border-gray-200 lg:pbx-py-10 pbx-py-8 pbx-px-2"
|
|
167
|
+
>
|
|
168
|
+
<!-- Use SVG preview instead of external images -->
|
|
169
|
+
<div
|
|
170
|
+
class="pbx-max-h-72 pbx-cursor-pointer pbx-bg-white pbx-mx-auto pbx-flex pbx-items-center pbx-justify-center"
|
|
171
|
+
v-html="getSvgPreview(comp.title)"
|
|
172
|
+
></div>
|
|
173
|
+
</div>
|
|
174
|
+
<div class="pbx-p-3">
|
|
175
|
+
<h4 class="pbx-myPrimaryParagraph pbx-text-sm pbx-font-normal">
|
|
176
|
+
{{ translate(comp.title) }}
|
|
177
|
+
</h4>
|
|
178
|
+
<div class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-pt-2">
|
|
179
|
+
{{ translate('Click to add component') }}
|
|
180
|
+
</div>
|
|
161
181
|
</div>
|
|
162
182
|
</div>
|
|
163
183
|
</div>
|
|
164
184
|
</div>
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
<button class="pbx-sr-only">Focusable fallback</button>
|
|
168
|
-
</div>
|
|
169
|
-
</div>
|
|
170
|
-
<template v-if="isLoading">
|
|
171
|
-
<div class="pbx-flex pbx-items-center pbx-justify-center">
|
|
172
|
-
<div
|
|
173
|
-
class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
|
|
174
|
-
>
|
|
175
|
-
<span
|
|
176
|
-
class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"
|
|
177
|
-
>{{ translate('Loading...') }}</span
|
|
178
|
-
>
|
|
185
|
+
<div>
|
|
186
|
+
<button class="pbx-sr-only">Focusable fallback</button>
|
|
179
187
|
</div>
|
|
180
188
|
</div>
|
|
181
|
-
</
|
|
189
|
+
</div>
|
|
182
190
|
</template>
|