@myissue/vue-website-page-builder 3.0.1
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/LICENSE +21 -0
- package/README.md +470 -0
- package/dist/android-chrome-192x192.png +0 -0
- package/dist/android-chrome-512x512.png +0 -0
- package/dist/apple-touch-icon.png +0 -0
- package/dist/browserconfig.xml +9 -0
- package/dist/components.json +36 -0
- package/dist/favicon-16x16.png +0 -0
- package/dist/favicon-32x32.png +0 -0
- package/dist/favicon.ico +0 -0
- package/dist/home/features.jpg +0 -0
- package/dist/home/page-builder-example.jpg +0 -0
- package/dist/logo/logo.svg +49 -0
- package/dist/mstile-310x150.png +0 -0
- package/dist/mstile-310x310.png +0 -0
- package/dist/page-builder/2-images-text-top.png +0 -0
- package/dist/page-builder/2-images.png +0 -0
- package/dist/page-builder/3-images.png +0 -0
- package/dist/page-builder/6-images.png +0 -0
- package/dist/page-builder/image.png +0 -0
- package/dist/page-builder/placeholder.jpg +0 -0
- package/dist/page-builder/two-vertical-images.png +0 -0
- package/dist/placeholder_image.jpg +0 -0
- package/dist/robots.txt +2 -0
- package/dist/vue-website-page-builder.css +1 -0
- package/dist/vue-website-page-builder.js +24794 -0
- package/dist/vue-website-page-builder.umd.cjs +195 -0
- package/package.json +99 -0
- package/src/App.vue +122 -0
- package/src/Components/Homepage/Footer.vue +42 -0
- package/src/Components/Homepage/HomeSection.vue +540 -0
- package/src/Components/Homepage/Navbar.vue +30 -0
- package/src/Components/Layouts/FullWidthElement.vue +34 -0
- package/src/Components/Loaders/FullScreenSpinner.vue +13 -0
- package/src/Components/Loaders/SmallUniversalSpinner.vue +26 -0
- package/src/Components/MediaLibrary/SidebarUnsplash.vue +40 -0
- package/src/Components/MediaLibrary/Unsplash.vue +306 -0
- package/src/Components/Modals/DynamicModal.vue +476 -0
- package/src/Components/Modals/MediaLibraryModal.vue +418 -0
- package/src/Components/Modals/Modal.vue +102 -0
- package/src/Components/Modals/PageBuilderModal.vue +233 -0
- package/src/Components/Modals/PageBuilderPreviewModal.vue +123 -0
- package/src/Components/PageBuilder/DropdownsPlusToggles/OptionsDropdown.vue +202 -0
- package/src/Components/PageBuilder/DropdownsPlusToggles/SaveDesign.vue +7 -0
- package/src/Components/PageBuilder/EditorMenu/Editables/BackgroundColorEditor.vue +91 -0
- package/src/Components/PageBuilder/EditorMenu/Editables/BorderRadius.vue +163 -0
- package/src/Components/PageBuilder/EditorMenu/Editables/Borders.vue +164 -0
- package/src/Components/PageBuilder/EditorMenu/Editables/ClassEditor.vue +80 -0
- package/src/Components/PageBuilder/EditorMenu/Editables/ComponentTopMenu.vue +93 -0
- package/src/Components/PageBuilder/EditorMenu/Editables/DeleteElement.vue +42 -0
- package/src/Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue +338 -0
- package/src/Components/PageBuilder/EditorMenu/Editables/ElementEditor.vue +58 -0
- package/src/Components/PageBuilder/EditorMenu/Editables/ImageEditor.vue +82 -0
- package/src/Components/PageBuilder/EditorMenu/Editables/LinkEditor.vue +301 -0
- package/src/Components/PageBuilder/EditorMenu/Editables/ManageBackgroundOpacity.vue +109 -0
- package/src/Components/PageBuilder/EditorMenu/Editables/ManageOpacity.vue +107 -0
- package/src/Components/PageBuilder/EditorMenu/Editables/OpacityEditor.vue +16 -0
- package/src/Components/PageBuilder/EditorMenu/Editables/PaddingPlusMargin.vue +134 -0
- package/src/Components/PageBuilder/EditorMenu/Editables/TextColorEditor.vue +91 -0
- package/src/Components/PageBuilder/EditorMenu/Editables/Typography.vue +199 -0
- package/src/Components/PageBuilder/EditorMenu/EditorAccordion.vue +42 -0
- package/src/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue +113 -0
- package/src/Components/PageBuilder/Settings/AdvancedPageBuilderSettings.vue +229 -0
- package/src/Components/PageBuilder/Settings/PageBuilderSettings.vue +101 -0
- package/src/Components/PageBuilder/Slidebars/SlideOverRight.vue +91 -0
- package/src/Components/PageBuilder/Slidebars/SlideOverRightParent.vue +91 -0
- package/src/Components/Search/SearchComponents.vue +259 -0
- package/src/Components/TipTap/TipTap.vue +32 -0
- package/src/Components/TipTap/TipTapInput.vue +325 -0
- package/src/PageBuilder/PageBuilder.vue +347 -0
- package/src/PageBuilder/Preview.vue +24 -0
- package/src/composables/PageBuilder.ts +1483 -0
- package/src/composables/delay.ts +5 -0
- package/src/composables/extract-text-content-html.ts +34 -0
- package/src/composables/isObject.ts +6 -0
- package/src/composables/usePromise.ts +10 -0
- package/src/composables/vueFetch.ts +278 -0
- package/src/css/app.css +614 -0
- package/src/index.ts +16 -0
- package/src/main.ts +11 -0
- package/src/stores/media-library.ts +34 -0
- package/src/stores/page-builder-state.ts +461 -0
- package/src/stores/unsplash.ts +107 -0
- package/src/stores/user.ts +30 -0
- package/src/types/global.d.ts +49 -0
- package/src/utils/builder/compiledCSS.ts +2205 -0
- package/src/utils/builder/html-doc-declaration-with-components.ts +7 -0
- package/src/utils/builder/html-elements/componentHelpers.ts +101 -0
- package/src/utils/builder/tailwaind-colors.ts +503 -0
- package/src/utils/builder/tailwind-border-radius.ts +67 -0
- package/src/utils/builder/tailwind-border-style-width-color.ts +272 -0
- package/src/utils/builder/tailwind-font-sizes.ts +76 -0
- package/src/utils/builder/tailwind-font-styles.ts +24 -0
- package/src/utils/builder/tailwind-opacities.ts +45 -0
- package/src/utils/builder/tailwind-padding-margin.ts +159 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 Qais Wardag
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,470 @@
|
|
|
1
|
+
# @myissue/vue-website-page-builder
|
|
2
|
+
|
|
3
|
+
## 🚧 **DEVELOPMENT VERSION - NOT READY FOR PRODUCTION** 🚧
|
|
4
|
+
|
|
5
|
+
> **⚠️ WARNING**: This package is currently in **alpha development stage**.
|
|
6
|
+
>
|
|
7
|
+
> - **DO NOT USE IN PRODUCTION** applications
|
|
8
|
+
> - APIs may change without notice
|
|
9
|
+
> - Features may be incomplete or unstable
|
|
10
|
+
> - Documentation is work in progress
|
|
11
|
+
> - Use only for testing and development purposes
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Overview
|
|
16
|
+
|
|
17
|
+
A Vue.js page builder component with drag & drop functionality for creating dynamic web pages.
|
|
18
|
+
|
|
19
|
+
## Installation
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm install @myissue/vue-website-page-builder
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Quick Start
|
|
26
|
+
|
|
27
|
+
```vue
|
|
28
|
+
<script setup>
|
|
29
|
+
import { PageBuilder } from '@myissue/vue-website-page-builder'
|
|
30
|
+
import '@myissue/vue-website-page-builder/style.css'
|
|
31
|
+
</script>
|
|
32
|
+
|
|
33
|
+
<template>
|
|
34
|
+
<PageBuilder />
|
|
35
|
+
</template>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Features
|
|
39
|
+
|
|
40
|
+
- 🎯 **Zero Configuration** - Just import and use
|
|
41
|
+
- 🔧 **Self-contained** - Manages its own state internally
|
|
42
|
+
- 🎨 **Drag & Drop** - Visual page building experience
|
|
43
|
+
- 📱 **Responsive** - Mobile-friendly interface
|
|
44
|
+
- ⚡ **Vue 3** - Built with modern Vue.js
|
|
45
|
+
|
|
46
|
+
## Development Status
|
|
47
|
+
|
|
48
|
+
| Feature | Status |
|
|
49
|
+
| ------------------ | -------------- |
|
|
50
|
+
| Basic Page Builder | 🟡 Alpha |
|
|
51
|
+
| Component Library | 🟡 Alpha |
|
|
52
|
+
| State Management | 🟡 Alpha |
|
|
53
|
+
| Documentation | 🔴 In Progress |
|
|
54
|
+
| Testing | 🔴 Not Started |
|
|
55
|
+
| Stable API | 🔴 Not Ready |
|
|
56
|
+
|
|
57
|
+
## Requirements
|
|
58
|
+
|
|
59
|
+
- Node.js ≥ 18.0.0
|
|
60
|
+
- Vue.js ≥ 3.0.0
|
|
61
|
+
- Modern browser with ES6+ support
|
|
62
|
+
|
|
63
|
+
## License
|
|
64
|
+
|
|
65
|
+
MIT License - see LICENSE file for details
|
|
66
|
+
|
|
67
|
+
## Author
|
|
68
|
+
|
|
69
|
+
**qaiswardag**
|
|
70
|
+
|
|
71
|
+
- GitHub: [@qaiswardag](https://github.com/qaiswardag)
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
> 🚧 **Remember**: This is a development version. Wait for v1.0.0 for production use!
|
|
76
|
+
|
|
77
|
+
<p align="center" dir="auto">
|
|
78
|
+
<img width="200" style="max-width: 100%;" src="./public/logo/logo.svg" alt="Logo">
|
|
79
|
+
</p>
|
|
80
|
+
|
|
81
|
+
# Free Click & Drop Page Builder
|
|
82
|
+
|
|
83
|
+
[Play around with the page builder](https://www.builder-demo.myissue.dk)
|
|
84
|
+
|
|
85
|
+
This app was born out of my desire to create a minimalist page builder with an elegant and intuitive design.
|
|
86
|
+
|
|
87
|
+
The web builder for stunning pages. Enable users to design and publish modern pages at any scale. Build responsive pages like listings, jobs or blog posts and manage content easily using the free Click & Drop Page Builder.
|
|
88
|
+
|
|
89
|
+
To star the repository, simply click on the **Star** button located at the top-right corner of the GitHub page. Thank you in advance for your support! 🙌
|
|
90
|
+
|
|
91
|
+
## Demo
|
|
92
|
+
|
|
93
|
+
Introducing the **Free Vue Click & Drop Page Builder**
|
|
94
|
+
create and enhance digital experiences with Vue on any backend.
|
|
95
|
+
|
|
96
|
+
[Play around with the page builder](https://www.builder-demo.myissue.dk)
|
|
97
|
+
|
|
98
|
+
## About
|
|
99
|
+
|
|
100
|
+
A Page Builder designed for growth. Build your website pages with ready-made components that are fully customizable and always responsive, designed to fit every need. A powerful Page Builder for growing merchants, brands, and agencies.
|
|
101
|
+
|
|
102
|
+
## Features
|
|
103
|
+
|
|
104
|
+
Includes:
|
|
105
|
+
|
|
106
|
+
- **Page Builder**: Click & Drop Page Builder.
|
|
107
|
+
- **Customizable Design**: Tailor the look to match your brand.
|
|
108
|
+
|
|
109
|
+
The Page Builder is packed with features:
|
|
110
|
+
|
|
111
|
+
- **Click & Drop**: Easily rearrange elements on your page.
|
|
112
|
+
- **Reordering**: Change the order of your content without hassle.
|
|
113
|
+
- **True Visual Editing**: See your changes in real-time as you make them.
|
|
114
|
+
- **Media Library**: Access and manage your media files effortlessly.
|
|
115
|
+
- **Unsplash**: Unsplash Integration.
|
|
116
|
+
- **Responsive Editing**: Ensure your site looks great on all devices.
|
|
117
|
+
- **Text Editing**: Customize your text with ease.
|
|
118
|
+
- **Font Customization**: Choose the perfect fonts to match your style.
|
|
119
|
+
- **Undo & Redo**: Experiment confidently with the ability to revert changes.
|
|
120
|
+
- **Global Styles**: Global Styles for fonts, designs, & colors.
|
|
121
|
+
- **YouTube Videos**: Integrate video content smoothly.
|
|
122
|
+
|
|
123
|
+
Powerful Page Builder for any growing merchants, brands, &
|
|
124
|
+
agencies. Empower users to create the perfect content with the Page Builder.
|
|
125
|
+
|
|
126
|
+
## Technical details
|
|
127
|
+
|
|
128
|
+
- **Technologies**: This Page Builder is developed using JavaScript, Vue 3, the Composition API, Pinia, CSS, Tailwind CSS, and HTML.
|
|
129
|
+
- **Features**: Click & Drop Page Builder.
|
|
130
|
+
|
|
131
|
+
## Documentation
|
|
132
|
+
|
|
133
|
+
### Required software installation
|
|
134
|
+
|
|
135
|
+
Please note that these instructions assume you have Node.js installed.
|
|
136
|
+
|
|
137
|
+
### Getting started & installation
|
|
138
|
+
|
|
139
|
+
Make sure to install the dependencies:
|
|
140
|
+
|
|
141
|
+
```bash
|
|
142
|
+
# npm
|
|
143
|
+
npm install
|
|
144
|
+
|
|
145
|
+
# pnpm
|
|
146
|
+
pnpm install
|
|
147
|
+
|
|
148
|
+
# yarn
|
|
149
|
+
yarn install
|
|
150
|
+
|
|
151
|
+
# bun
|
|
152
|
+
bun install
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
### Customization
|
|
156
|
+
|
|
157
|
+
I have separated all the logic for manipulating the HTML elements into its own PageBuilder class, which can be found at the path: `src/composables/PageBuilder.js`.
|
|
158
|
+
|
|
159
|
+
Customizing the page builder is made simple since all the logic resides in the PageBuilder Class.
|
|
160
|
+
|
|
161
|
+
### Example use of Page Builder
|
|
162
|
+
|
|
163
|
+
```vue
|
|
164
|
+
<script setup>
|
|
165
|
+
const mediaLibraryStore = useMediaLibraryStore();
|
|
166
|
+
const pageBuilderStateStore = usePageBuilderStateStore();
|
|
167
|
+
const userStore = useUserStore();
|
|
168
|
+
const openPageBuilder = ref(false);
|
|
169
|
+
|
|
170
|
+
const pageBuilderPrimaryHandler = ref(null);
|
|
171
|
+
const pageBuilderSecondaryHandler = ref(null);
|
|
172
|
+
const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore);
|
|
173
|
+
const formType = ref('create');
|
|
174
|
+
|
|
175
|
+
const getIsLoading = computed(() => {
|
|
176
|
+
return userStore.getIsLoading;
|
|
177
|
+
});
|
|
178
|
+
|
|
179
|
+
const pathPageBuilderStorageCreate = `page-builder-create-post`;
|
|
180
|
+
|
|
181
|
+
const resourceId = 1;
|
|
182
|
+
const pathPageBuilderStorageUpdate = `page-builder-update-post-id-${resourceId}`;
|
|
183
|
+
|
|
184
|
+
const handlePageBuilder = async function () {
|
|
185
|
+
|
|
186
|
+
userStore.setIsLoading(true);
|
|
187
|
+
|
|
188
|
+
await nextTick();
|
|
189
|
+
openPageBuilder.value = true;
|
|
190
|
+
|
|
191
|
+
if (formType.value === 'create') {
|
|
192
|
+
pageBuilderStateStore.setComponents([]);
|
|
193
|
+
pageBuilder.areComponentsStoredInLocalStorage();
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
// handle click
|
|
197
|
+
pageBuilderPrimaryHandler.value = async function () {
|
|
198
|
+
userStore.setIsLoading(true);
|
|
199
|
+
|
|
200
|
+
if (formType.value === 'update') {
|
|
201
|
+
await nextTick();
|
|
202
|
+
pageBuilder.saveComponentsLocalStorageUpdate();
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
openPageBuilder.value = false;
|
|
207
|
+
userStore.setIsLoading(false);
|
|
208
|
+
};
|
|
209
|
+
|
|
210
|
+
// handle click
|
|
211
|
+
pageBuilderSecondaryHandler.value = async function () {
|
|
212
|
+
userStore.setIsLoading(true);
|
|
213
|
+
|
|
214
|
+
// save to local storage if new resource
|
|
215
|
+
if (formType.value === 'create') {
|
|
216
|
+
await nextTick();
|
|
217
|
+
pageBuilder.saveComponentsLocalStorage();
|
|
218
|
+
await nextTick();
|
|
219
|
+
}
|
|
220
|
+
// save to local storage if update
|
|
221
|
+
if (formType.value === 'update') {
|
|
222
|
+
await nextTick();
|
|
223
|
+
pageBuilder.synchronizeDOMAndComponents();
|
|
224
|
+
await nextTick();
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
openPageBuilder.value = false;
|
|
228
|
+
userStore.setIsLoading(false);
|
|
229
|
+
};
|
|
230
|
+
|
|
231
|
+
userStore.setIsLoading(false);
|
|
232
|
+
|
|
233
|
+
// end modal
|
|
234
|
+
};
|
|
235
|
+
// Builder # End
|
|
236
|
+
const handleDraftForUpdate = async function () {
|
|
237
|
+
userStore.setIsLoading(true);
|
|
238
|
+
|
|
239
|
+
if (formType.value === 'update') {
|
|
240
|
+
await nextTick();
|
|
241
|
+
pageBuilder.areComponentsStoredInLocalStorageUpdate();
|
|
242
|
+
await nextTick();
|
|
243
|
+
pageBuilder.setEventListenersForElements();****
|
|
244
|
+
userStore.setIsLoading(false);
|
|
245
|
+
}
|
|
246
|
+
};
|
|
247
|
+
|
|
248
|
+
onBeforeMount(() => {
|
|
249
|
+
pageBuilderStateStore.setLocalStorageItemName(pathPageBuilderStorageCreate);
|
|
250
|
+
|
|
251
|
+
pageBuilderStateStore.setLocalStorageItemNameUpdate(
|
|
252
|
+
pathPageBuilderStorageUpdate
|
|
253
|
+
);
|
|
254
|
+
});
|
|
255
|
+
</script>
|
|
256
|
+
|
|
257
|
+
<template>
|
|
258
|
+
<PageBuilderModal
|
|
259
|
+
:show="openPageBuilder"
|
|
260
|
+
updateOrCreate="create"
|
|
261
|
+
@pageBuilderPrimaryHandler="pageBuilderPrimaryHandler"
|
|
262
|
+
@pageBuilderSecondaryHandler="pageBuilderSecondaryHandler"
|
|
263
|
+
@handleDraftForUpdate="handleDraftForUpdate"
|
|
264
|
+
>
|
|
265
|
+
<PageBuilderView></PageBuilderView>
|
|
266
|
+
</PageBuilderModal>
|
|
267
|
+
</template>
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
### Saving Page Builder drafts to local storage
|
|
271
|
+
|
|
272
|
+
Each Page Builder draft is automatically saved to local storage, allowing you to resume your work later. This process differs slightly depending on whether you are creating a new resource like a blog post, job ad, or listing, or updating an existing resource.
|
|
273
|
+
|
|
274
|
+
When creating a new resource like a blog post, job ad, or listing, you need to specify a name for the local storage item that will store the draft. This is done as follows:
|
|
275
|
+
|
|
276
|
+
```js
|
|
277
|
+
const pathPageBuilderStorageCreate = `page-builder-create-post`
|
|
278
|
+
|
|
279
|
+
onBeforeMount(() => {
|
|
280
|
+
// Define local storage key name before on mount
|
|
281
|
+
pageBuilderStateStore.setLocalStorageItemName(pathPageBuilderStorageCreate)
|
|
282
|
+
})
|
|
283
|
+
```
|
|
284
|
+
|
|
285
|
+
For updating an existing resource like a blog post, job ad, or listing, you must first obtain the blog post ID and then save a name that includes this ID to local storage. This way, the Page Builder can find the exact resource from local storage later on when the user wants to continue editing the resource with the unique ID:
|
|
286
|
+
|
|
287
|
+
```js
|
|
288
|
+
const resourceId = 1
|
|
289
|
+
const pathPageBuilderStorageUpdate = `page-builder-update-post-id-${resourceId}`
|
|
290
|
+
|
|
291
|
+
onBeforeMount(() => {
|
|
292
|
+
// Define local storage key name before on mount
|
|
293
|
+
pageBuilderStateStore.setLocalStorageItemNameUpdate(pathPageBuilderStorageUpdate)
|
|
294
|
+
})
|
|
295
|
+
```
|
|
296
|
+
|
|
297
|
+
In both cases, the pageBuilderStateStore is responsible for handling the local storage name, ensuring that the correct draft is stored and retrieved as needed.
|
|
298
|
+
|
|
299
|
+
### HTML Components
|
|
300
|
+
|
|
301
|
+
If Creating new components, please always add the HTML inside section tags.
|
|
302
|
+
|
|
303
|
+
```html
|
|
304
|
+
<section>
|
|
305
|
+
<div>
|
|
306
|
+
<p>New components</p>
|
|
307
|
+
</div>
|
|
308
|
+
</section>
|
|
309
|
+
```
|
|
310
|
+
|
|
311
|
+
HTML components are currently stored in a JSON file named `components.json` in the root directory. HTML components can also be easily stored in the database, resulting in better management. Simply provide the `setLoadComponents` method with the new URL for loading components from the backend.
|
|
312
|
+
|
|
313
|
+
### Unsplash
|
|
314
|
+
|
|
315
|
+
Please note that if you want to use Unsplash, simply create an .env file in your root folder and enter your Unsplash API key and value.
|
|
316
|
+
|
|
317
|
+
Example: VITE_UNSPLASH_KEY="your-unsplash-api-key-here"
|
|
318
|
+
|
|
319
|
+
[Get your unsplash api key here](https://unsplash.com/developers).
|
|
320
|
+
|
|
321
|
+
## Use with Backend
|
|
322
|
+
|
|
323
|
+
The Page builder's capabilities become infinite when integrated with a backend.
|
|
324
|
+
|
|
325
|
+
If you're familiar with Laravel, the Page Builder is already integrated with the open-source Laravel Free Listing Directory, Blog & Job Board Theme, which is available at:
|
|
326
|
+
[demo & repo](https://github.com/qaiswardag/laravel_vue_directory_and_job_board_theme).
|
|
327
|
+
|
|
328
|
+
By utilizing a backend Framework, the HTML components, currently stored in a JSON file at `components.json`, can be easily stored in the database, resulting in better management of HTML components.
|
|
329
|
+
|
|
330
|
+
## Get in touch
|
|
331
|
+
|
|
332
|
+
If you have any questions or if you're looking for customization, feel free to connect with me on LinkedIn and send me a message.
|
|
333
|
+
|
|
334
|
+
- [Email](mailto:qais.wardag@outlook.com)
|
|
335
|
+
- [LinkedIn](https://www.linkedin.com/in/qaiswardag)
|
|
336
|
+
|
|
337
|
+
## Contributing
|
|
338
|
+
|
|
339
|
+
Thank you for considering contributing to this project!
|
|
340
|
+
|
|
341
|
+
# Vue Website Page Builder
|
|
342
|
+
|
|
343
|
+
A powerful, flexible Vue 3 page builder component for creating dynamic websites.
|
|
344
|
+
|
|
345
|
+
## Features
|
|
346
|
+
|
|
347
|
+
- 🎨 Drag & drop page builder interface
|
|
348
|
+
- 🧩 Modular component system
|
|
349
|
+
- 📱 Responsive design support
|
|
350
|
+
- 🎯 TypeScript support
|
|
351
|
+
- 🔧 Customizable components
|
|
352
|
+
- 💾 State management with Pinia
|
|
353
|
+
- 🎨 TailwindCSS styling
|
|
354
|
+
|
|
355
|
+
## Installation
|
|
356
|
+
|
|
357
|
+
### For Production Use
|
|
358
|
+
|
|
359
|
+
```bash
|
|
360
|
+
npm install vue-website-page-builder
|
|
361
|
+
```
|
|
362
|
+
|
|
363
|
+
### For Local Development
|
|
364
|
+
|
|
365
|
+
If you want to use this package locally in your Laravel project for development:
|
|
366
|
+
|
|
367
|
+
1. **Clone and build the package:**
|
|
368
|
+
|
|
369
|
+
```bash
|
|
370
|
+
git clone <repository-url>
|
|
371
|
+
cd vue-website-page-builder
|
|
372
|
+
npm install
|
|
373
|
+
npm run build:lib
|
|
374
|
+
```
|
|
375
|
+
|
|
376
|
+
2. **Set up in your Laravel project:**
|
|
377
|
+
|
|
378
|
+
```bash
|
|
379
|
+
# In your Laravel project's resources/js/package.json
|
|
380
|
+
{
|
|
381
|
+
"dependencies": {
|
|
382
|
+
"vue-website-page-builder": "file:../../../vue-website-page-builder",
|
|
383
|
+
"vue": "^3.5.13",
|
|
384
|
+
"pinia": "^2.1.7"
|
|
385
|
+
}
|
|
386
|
+
}
|
|
387
|
+
```
|
|
388
|
+
|
|
389
|
+
3. **Install dependencies:**
|
|
390
|
+
```bash
|
|
391
|
+
cd your-laravel-project/resources/js
|
|
392
|
+
npm install
|
|
393
|
+
```
|
|
394
|
+
|
|
395
|
+
For detailed local development setup, see [LOCAL_DEVELOPMENT.md](./LOCAL_DEVELOPMENT.md).
|
|
396
|
+
|
|
397
|
+
## Usage
|
|
398
|
+
|
|
399
|
+
```vue
|
|
400
|
+
<template>
|
|
401
|
+
<div>
|
|
402
|
+
<PageBuilder />
|
|
403
|
+
</div>
|
|
404
|
+
</template>
|
|
405
|
+
|
|
406
|
+
<script setup>
|
|
407
|
+
import { PageBuilder, usePageBuilderStateStore } from 'vue-website-page-builder'
|
|
408
|
+
import 'vue-website-page-builder/style.css'
|
|
409
|
+
|
|
410
|
+
const pageBuilderStore = usePageBuilderStateStore()
|
|
411
|
+
</script>
|
|
412
|
+
```
|
|
413
|
+
|
|
414
|
+
## Available Components
|
|
415
|
+
|
|
416
|
+
- `PageBuilder` - Main page builder interface
|
|
417
|
+
- `Preview` - Preview component for displaying built pages
|
|
418
|
+
|
|
419
|
+
## Available Stores
|
|
420
|
+
|
|
421
|
+
- `usePageBuilderStateStore` - Main state management store
|
|
422
|
+
|
|
423
|
+
## Development
|
|
424
|
+
|
|
425
|
+
### Scripts
|
|
426
|
+
|
|
427
|
+
- `npm run dev` - Start development server
|
|
428
|
+
- `npm run build:lib` - Build library for distribution
|
|
429
|
+
- `npm run build` - Build for production
|
|
430
|
+
- `npm run type-check` - Run TypeScript type checking
|
|
431
|
+
- `npm run lint` - Run ESLint
|
|
432
|
+
- `npm run format` - Format code with Prettier
|
|
433
|
+
|
|
434
|
+
### Local Development Setup
|
|
435
|
+
|
|
436
|
+
Use the provided setup script:
|
|
437
|
+
|
|
438
|
+
```bash
|
|
439
|
+
./setup-local-dev.sh
|
|
440
|
+
```
|
|
441
|
+
|
|
442
|
+
Or follow the manual steps in [LOCAL_DEVELOPMENT.md](./LOCAL_DEVELOPMENT.md).
|
|
443
|
+
|
|
444
|
+
## Requirements
|
|
445
|
+
|
|
446
|
+
- Vue 3.5+
|
|
447
|
+
- Node.js 18+
|
|
448
|
+
- TypeScript 5+
|
|
449
|
+
|
|
450
|
+
## Dependencies
|
|
451
|
+
|
|
452
|
+
- Vue 3
|
|
453
|
+
- Pinia (state management)
|
|
454
|
+
- TailwindCSS (styling)
|
|
455
|
+
- TipTap (rich text editing)
|
|
456
|
+
- Headless UI (accessible components)
|
|
457
|
+
|
|
458
|
+
## License
|
|
459
|
+
|
|
460
|
+
[MIT License](./LICENSE)
|
|
461
|
+
|
|
462
|
+
## Contributing
|
|
463
|
+
|
|
464
|
+
1. Fork the repository
|
|
465
|
+
2. Create your feature branch
|
|
466
|
+
3. Make your changes
|
|
467
|
+
4. Build and test locally
|
|
468
|
+
5. Submit a pull request
|
|
469
|
+
|
|
470
|
+
For local development setup, see [LOCAL_DEVELOPMENT.md](./LOCAL_DEVELOPMENT.md).
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
{
|
|
2
|
+
"components": {
|
|
3
|
+
"data": [
|
|
4
|
+
{
|
|
5
|
+
"title": "Single Image",
|
|
6
|
+
"html_code": "<section>\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2\"><div class=\"mx-auto max-w-7xl\"><div class=\"myPrimaryGap grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1\"> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"></div></div></div></div>\n</section>",
|
|
7
|
+
"cover_image": "/page-builder/image.png"
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
"title": "2 vertical images",
|
|
11
|
+
"html_code": "<section>\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2\"><div class=\"mx-auto max-w-7xl\"><div class=\"myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-2\"> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"> </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"> </div> </div> </div> </div>\n</section>",
|
|
12
|
+
"cover_image": "/page-builder/two-vertical-images.png"
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
"title": "2 images",
|
|
16
|
+
"html_code": "<section>\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2\"><div class=\"mx-auto max-w-7xl\"><div class=\"myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3\"> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"> </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"> </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"></div></div> </div></div>\n</section>",
|
|
17
|
+
"cover_image": "/page-builder/3-images.png"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"title": "3 images",
|
|
21
|
+
"html_code": "<section>\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2\"><div class=\"mx-auto max-w-7xl\"><div class=\"myPrimaryGap grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2\"> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"> </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"></div></div> </div></div>\n</section>",
|
|
22
|
+
"cover_image": "/page-builder/2-images.png"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"title": "6 Images Grid",
|
|
26
|
+
"html_code": "<section>\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2\">\n<div class=\"mx-auto max-w-7xl\">\n<div class=\"grid grid-cols-2 md:grid-cols-3 myPrimaryGap\">\n\n<div>\n<img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"image\">\n</div>\n\n</div>\n</div>\n</div>\n</section>",
|
|
27
|
+
"cover_image": "/page-builder/6-images.png"
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"title": "Two Images With Right Text Top",
|
|
31
|
+
"html_code": "<section>\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2\"><div class=\"mx-auto max-w-7xl\">\n<div class=\"myPrimaryGap lg:flex lg:justify-center\"><div class=\"flex-1 py-2\">\n<div class=\"grid myPrimaryGap grid-cols-1 lg:grid-cols-2\"> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"> </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"> </div> </div> </div>\n\n<div class=\"flex-1 py-2\"> <div class=\"break-words py-2\"><p><strong>Title</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div></div> \n</div></div></div>\n</section>",
|
|
32
|
+
"cover_image": "/page-builder/2-images-text-top.png"
|
|
33
|
+
}
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
}
|
|
Binary file
|
|
Binary file
|
package/dist/favicon.ico
ADDED
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
+
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
4
|
+
width="175.536px" height="45.842px" viewBox="0 0 175.536 45.842" enable-background="new 0 0 175.536 45.842"
|
|
5
|
+
xml:space="preserve">
|
|
6
|
+
<g>
|
|
7
|
+
<g>
|
|
8
|
+
<polygon points="17.524,24.338 4.084,0.002 0.004,35.282 4.084,35.282 6.58,12.578 17.524,32.162 28.467,12.578 30.963,35.282
|
|
9
|
+
35.044,35.282 30.963,0.002 "/>
|
|
10
|
+
<polygon points="47.694,28.418 41.524,13.202 36.963,13.202 45.412,32.162 39.363,45.842 43.684,45.842 58.084,13.202
|
|
11
|
+
53.763,13.202 "/>
|
|
12
|
+
<rect x="61.922" y="1.682" width="4.08" height="33.6"/>
|
|
13
|
+
<path d="M91.083,19.37c-0.849-0.784-1.769-1.432-2.76-1.944c-0.992-0.512-1.937-0.928-2.832-1.248
|
|
14
|
+
c-1.952-0.672-3.497-1.352-4.632-2.04c-1.136-0.688-1.944-1.423-2.424-2.208c-0.48-0.784-0.72-1.64-0.72-2.568
|
|
15
|
+
c0-1.087,0.416-2.072,1.248-2.952c0.832-0.88,2.16-1.32,3.984-1.32c1.312,0,2.424,0.256,3.336,0.768
|
|
16
|
+
c0.912,0.512,1.688,1.168,2.328,1.968c0.64,0.8,1.167,1.616,1.584,2.448l3.504-2.016c-0.544-1.184-1.296-2.312-2.256-3.384
|
|
17
|
+
c-0.96-1.072-2.12-1.951-3.48-2.64c-1.361-0.688-2.952-1.032-4.776-1.032c-1.889,0-3.569,0.376-5.04,1.128
|
|
18
|
+
c-1.473,0.752-2.625,1.784-3.456,3.096c-0.833,1.312-1.248,2.8-1.248,4.464c0,1.536,0.295,2.832,0.888,3.888
|
|
19
|
+
c0.592,1.056,1.352,1.944,2.28,2.664c0.928,0.72,1.903,1.312,2.928,1.776c1.024,0.464,1.952,0.84,2.784,1.128
|
|
20
|
+
c1.279,0.449,2.488,0.953,3.624,1.512c1.135,0.56,2.056,1.288,2.76,2.184c0.704,0.896,1.056,2.097,1.056,3.6
|
|
21
|
+
c0,1.536-0.544,2.801-1.632,3.792c-1.088,0.992-2.528,1.488-4.32,1.488c-1.344,0-2.544-0.288-3.6-0.864
|
|
22
|
+
c-1.056-0.576-2.009-1.375-2.856-2.4c-0.849-1.024-1.656-2.208-2.424-3.552l-3.264,2.208c0.735,1.472,1.688,2.856,2.856,4.152
|
|
23
|
+
c1.167,1.296,2.527,2.336,4.08,3.12c1.552,0.784,3.24,1.176,5.064,1.176c1.344,0,2.631-0.224,3.864-0.672
|
|
24
|
+
c1.231-0.448,2.335-1.087,3.312-1.92c0.976-0.832,1.744-1.84,2.304-3.024c0.559-1.183,0.84-2.512,0.84-3.984
|
|
25
|
+
c0-1.536-0.272-2.856-0.816-3.96C92.626,21.098,91.93,20.155,91.083,19.37z"/>
|
|
26
|
+
<path d="M117.386,19.37c-0.849-0.784-1.769-1.432-2.76-1.944c-0.992-0.512-1.937-0.928-2.832-1.248
|
|
27
|
+
c-1.952-0.672-3.497-1.352-4.632-2.04c-1.136-0.688-1.944-1.423-2.424-2.208c-0.48-0.784-0.72-1.64-0.72-2.568
|
|
28
|
+
c0-1.087,0.416-2.072,1.248-2.952c0.832-0.88,2.16-1.32,3.984-1.32c1.312,0,2.424,0.256,3.336,0.768
|
|
29
|
+
c0.912,0.512,1.688,1.168,2.328,1.968c0.64,0.8,1.167,1.616,1.584,2.448l3.504-2.016c-0.544-1.184-1.296-2.312-2.256-3.384
|
|
30
|
+
c-0.96-1.072-2.12-1.951-3.48-2.64c-1.361-0.688-2.952-1.032-4.776-1.032c-1.889,0-3.569,0.376-5.04,1.128
|
|
31
|
+
c-1.473,0.752-2.625,1.784-3.456,3.096c-0.833,1.312-1.248,2.8-1.248,4.464c0,1.536,0.295,2.832,0.888,3.888
|
|
32
|
+
c0.592,1.056,1.352,1.944,2.28,2.664c0.928,0.72,1.903,1.312,2.928,1.776c1.024,0.464,1.952,0.84,2.784,1.128
|
|
33
|
+
c1.279,0.449,2.488,0.953,3.624,1.512c1.135,0.56,2.056,1.288,2.76,2.184c0.704,0.896,1.056,2.097,1.056,3.6
|
|
34
|
+
c0,1.536-0.544,2.801-1.632,3.792c-1.088,0.992-2.528,1.488-4.32,1.488c-1.344,0-2.544-0.288-3.6-0.864
|
|
35
|
+
c-1.056-0.576-2.009-1.375-2.856-2.4c-0.849-1.024-1.656-2.208-2.424-3.552l-3.264,2.208c0.735,1.472,1.688,2.856,2.856,4.152
|
|
36
|
+
c1.167,1.296,2.527,2.336,4.08,3.12c1.552,0.784,3.24,1.176,5.064,1.176c1.344,0,2.631-0.224,3.864-0.672
|
|
37
|
+
c1.231-0.448,2.335-1.087,3.312-1.92c0.976-0.832,1.744-1.84,2.304-3.024c0.559-1.183,0.84-2.512,0.84-3.984
|
|
38
|
+
c0-1.536-0.272-2.856-0.816-3.96C118.93,21.098,118.233,20.155,117.386,19.37z"/>
|
|
39
|
+
<path d="M144.818,24.242c0,2.304-0.624,4.16-1.872,5.568c-1.248,1.409-3.072,2.112-5.472,2.112s-4.224-0.704-5.472-2.112
|
|
40
|
+
c-1.248-1.408-1.872-3.264-1.872-5.568V1.682h-4.08v22.56c0,1.664,0.264,3.2,0.792,4.608c0.528,1.409,1.296,2.625,2.304,3.648
|
|
41
|
+
c1.008,1.025,2.216,1.824,3.624,2.4c1.408,0.576,2.976,0.864,4.704,0.864s3.295-0.288,4.704-0.864
|
|
42
|
+
c1.408-0.576,2.616-1.375,3.624-2.4c1.008-1.023,1.776-2.239,2.304-3.648c0.528-1.408,0.792-2.944,0.792-4.608V1.682h-4.08V24.242
|
|
43
|
+
z"/>
|
|
44
|
+
<polygon points="175.538,5.522 175.538,1.682 160.418,1.682 158.594,1.682 156.337,1.682 156.337,35.282 158.594,35.282
|
|
45
|
+
160.418,35.282 175.538,35.282 175.538,31.442 160.418,31.442 160.418,18.962 168.022,18.962 168.022,15.122 160.418,15.122
|
|
46
|
+
160.418,5.522 "/>
|
|
47
|
+
</g>
|
|
48
|
+
</g>
|
|
49
|
+
</svg>
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/dist/robots.txt
ADDED