@myissue/vue-website-page-builder 3.1.34 → 3.1.35
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
CHANGED
|
@@ -23,9 +23,9 @@ npm install @myissue/vue-website-page-builder
|
|
|
23
23
|
|
|
24
24
|
## Click & Drop Page Builder
|
|
25
25
|
|
|
26
|
-
[Play around with the
|
|
26
|
+
[Play around with the Page Builder](https://www.builder-demo.myissue.dk)
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
Lightweight & Minimalist Page Builder with an elegant and intuitive design, focused on simplicity and speed.
|
|
29
29
|
|
|
30
30
|
Build responsive pages like listings, jobs or blog posts and manage content easily using the free Click & Drop Page Builder.
|
|
31
31
|
|
|
@@ -33,10 +33,10 @@ To star the repository, simply click on the **Star** button located at the top-r
|
|
|
33
33
|
|
|
34
34
|
## Demo
|
|
35
35
|
|
|
36
|
-
Introducing the **The
|
|
36
|
+
Introducing the **The Lightweight Free Vue Click & Drop Page Builder**
|
|
37
37
|
create and enhance digital experiences with Vue on any backend.
|
|
38
38
|
|
|
39
|
-
[Play around with the
|
|
39
|
+
[Play around with the Page Builder](https://www.builder-demo.myissue.dk)
|
|
40
40
|
|
|
41
41
|
## About
|
|
42
42
|
|
|
@@ -101,7 +101,7 @@ bun install
|
|
|
101
101
|
|
|
102
102
|
### Important: CSS Import Required
|
|
103
103
|
|
|
104
|
-
The
|
|
104
|
+
The Page Builder requires its CSS file to be imported for proper styling and automatic icon loading:
|
|
105
105
|
|
|
106
106
|
```js
|
|
107
107
|
import '@myissue/vue-website-page-builder/style.css'
|
|
@@ -109,16 +109,18 @@ import '@myissue/vue-website-page-builder/style.css'
|
|
|
109
109
|
|
|
110
110
|
This import automatically includes:
|
|
111
111
|
|
|
112
|
-
- ✅ Page
|
|
112
|
+
- ✅ Page Builder styles
|
|
113
113
|
- ✅ Google Fonts (Jost, Cormorant - no additional setup needed)
|
|
114
114
|
- ✅ Google Material Icons (no additional setup needed)
|
|
115
115
|
- ✅ Responsive design utilities
|
|
116
116
|
|
|
117
|
+
---
|
|
118
|
+
|
|
117
119
|
### Quick Start
|
|
118
120
|
|
|
119
121
|
Get up and running quickly and initializing the builder in your Vue project. The following example demonstrates the minimal setup required to start building pages.
|
|
120
122
|
|
|
121
|
-
- The
|
|
123
|
+
- The Page Builder requires its CSS file to be imported for proper styling and automatic icon loading:
|
|
122
124
|
|
|
123
125
|
```vue
|
|
124
126
|
<script setup>
|
|
@@ -140,7 +142,7 @@ Get up and running quickly by importing the PageBuilder component, setting up yo
|
|
|
140
142
|
- `pageBuilderLogo` to display your company logo in the builder toolbar
|
|
141
143
|
- `resourceData` to prefill the builder with initial data
|
|
142
144
|
- `userSettings` to set user preferences such as theme, language, or autoSave
|
|
143
|
-
- `createNewResourceFormName` (recommended): Specify the resource type (e.g., `"article"`, `"jobPost"`, `"store"`, etc.) in the `updateOrCreate` config. This is especially useful if your platform supports multiple resource types. By providing a unique name, the
|
|
145
|
+
- `createNewResourceFormName` (recommended): Specify the resource type (e.g., `"article"`, `"jobPost"`, `"store"`, etc.) in the `updateOrCreate` config. This is especially useful if your platform supports multiple resource types. By providing a unique name, the Page Builder can correctly manage layouts and local storage for each resource type, allowing users to continue where they left off for different resources.
|
|
144
146
|
|
|
145
147
|
```vue
|
|
146
148
|
<script setup>
|
|
@@ -175,7 +177,7 @@ const configPageBuilder = {
|
|
|
175
177
|
const pageBuilderStateStore = sharedPageBuilderStore
|
|
176
178
|
const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
|
|
177
179
|
|
|
178
|
-
// Initializing
|
|
180
|
+
// Initializing Page Builder with essential configuration
|
|
179
181
|
pageBuilderClass.setConfigPageBuilder(configPageBuilder)
|
|
180
182
|
</script>
|
|
181
183
|
|
|
@@ -186,9 +188,9 @@ pageBuilderClass.setConfigPageBuilder(configPageBuilder)
|
|
|
186
188
|
|
|
187
189
|
### Company Logo & Logged-in User
|
|
188
190
|
|
|
189
|
-
You can display your company logo in the
|
|
191
|
+
You can display your company logo in the Page Builder interface and set the currently logged-in user by passing both a logo URL and user information in your config object:
|
|
190
192
|
|
|
191
|
-
- **Company Logo:** Set the logo URL in your config object and pass it to the PageBuilder using `pageBuilderClass.setConfigPageBuilder(configPageBuilder)`. When provided, the logo will appear at the top of the
|
|
193
|
+
- **Company Logo:** Set the logo URL in your config object and pass it to the PageBuilder using `pageBuilderClass.setConfigPageBuilder(configPageBuilder)`. When provided, the logo will appear at the top of the Page Builder with proper spacing in the toolbar.
|
|
192
194
|
- **Logged-in User:** Pass a `userForPageBuilder` object in your config to display or use the logged-in user's information within the builder (e.g., for audit trails, personalization, or permissions).
|
|
193
195
|
|
|
194
196
|
**Basic Usage:**
|
|
@@ -23583,7 +23583,7 @@ const F4 = { class: "p-4" }, z4 = { class: "mb-8" }, j4 = { class: "grid grid-co
|
|
|
23583
23583
|
}, pS = { class: "overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg" }, uS = { class: "overflow-x-auto" }, mS = { class: "min-w-full divide-y divide-gray-300" }, hS = { class: "bg-white divide-y divide-gray-200" }, gS = { class: "px-6 py-4 whitespace-nowrap text-sm text-gray-500" }, fS = { class: "flex items-center space-x-3" }, bS = { class: "border-r border-gray-200 pr-6" }, yS = ["src"], wS = { class: "px-6 py-4 whitespace-nowrap text-sm text-gray-500" }, vS = { class: "flex items-center space-x-3" }, xS = { class: "border-r border-gray-200 pr-6" }, kS = { class: "flex items-center space-x-3" }, SS = { class: "whitespace-nowrap" }, CS = {
|
|
23584
23584
|
__name: "PageBuilderSettings",
|
|
23585
23585
|
setup(r) {
|
|
23586
|
-
const e = "v3.1.
|
|
23586
|
+
const e = "v3.1.35", t = Le, o = S(!1), n = S(""), i = S(null), s = L(() => t.getConfigPageBuilder), a = function() {
|
|
23587
23587
|
n.value = "Advanced Settings", o.value = !0;
|
|
23588
23588
|
}, l = function() {
|
|
23589
23589
|
o.value = !1;
|