@myissue/vue-website-page-builder 3.1.35 → 3.1.37

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
@@ -5,7 +5,10 @@
5
5
  ## **DEVELOPMENT VERSION - NOT READY FOR PRODUCTION**
6
6
 
7
7
  🚀 **Official Launch Date: June 15, 2025**
8
- _We're working hard to bring you a production-ready page builder. Stay tuned for updates!_
8
+ We're working hard to bring you a production-ready page builder. Stay tuned for updates!
9
+
10
+ You are welcome to test the builder and report any bugs or feedback before the official launch date.
11
+ Your input will help us deliver a more stable and feature-rich release!
9
12
 
10
13
  # Free Click & Drop Page Builder
11
14
 
@@ -57,7 +60,7 @@ The Page Builder is packed with features:
57
60
  - **Media Library**: Access and manage your media files effortlessly.
58
61
  - **Unsplash**: Unsplash Integration.
59
62
  - **Responsive Editing**: Ensure your site looks great on all devices.
60
- - **Text Editing**: Customize your text with ease.
63
+ - **Text Editing:** Edit text content live and in real-time.
61
64
  - **Font Customization**: Choose the perfect fonts to match your style.
62
65
  - **Undo & Redo**: Experiment confidently with the ability to revert changes.
63
66
  - **Global Styles**: Global Styles for fonts, designs, & colors.
@@ -68,11 +71,15 @@ agencies. Empower users to create the perfect content with the Page Builder.
68
71
 
69
72
  ## Technical details
70
73
 
71
- - **Technologies**: This Page Builder is developed using JavaScript, Vue 3, the Composition API, Pinia, CSS, Tailwind CSS, and HTML.
74
+ - **Technologies**: This Page Builder is developed using TypeScript, Vue 3, the Composition API, Pinia, CSS, Tailwind CSS, and HTML.
72
75
  - **Features**: Click & Drop Page Builder.
73
76
 
77
+ ---
78
+
74
79
  ## Documentation
75
80
 
81
+ ---
82
+
76
83
  ### Requirements
77
84
 
78
85
  Please note that these instructions assume you have Node.js installed.
@@ -81,6 +88,8 @@ Please note that these instructions assume you have Node.js installed.
81
88
  - Vue.js ≥ 3.0.0
82
89
  - Modern browser with ES6+ support
83
90
 
91
+ ---
92
+
84
93
  ### Getting started & installation
85
94
 
86
95
  Make sure to install the dependencies:
@@ -99,6 +108,8 @@ yarn install
99
108
  bun install
100
109
  ```
101
110
 
111
+ ---
112
+
102
113
  ### Important: CSS Import Required
103
114
 
104
115
  The Page Builder requires its CSS file to be imported for proper styling and automatic icon loading:
@@ -133,6 +144,8 @@ import '@myissue/vue-website-page-builder/style.css'
133
144
  </template>
134
145
  ```
135
146
 
147
+ ---
148
+
136
149
  ### Optional: Provide Config to PageBuilder
137
150
 
138
151
  Get up and running quickly by importing the PageBuilder component, setting up your configuration, and initializing the builder in your Vue project. The following example demonstrates the minimal setup required to start building pages with your own config and logo.
@@ -228,12 +241,14 @@ pageBuilderClass.setConfigPageBuilder(configPageBuilder)
228
241
  </template>
229
242
  ```
230
243
 
231
- configuration Options
244
+ Configuration Options
232
245
 
233
246
  | Prop | Type | Default | Description |
234
247
  | ----------------- | -------- | ------- | ----------------------------------- |
235
248
  | `PageBuilderLogo` | `String` | `null` | URL path to your company logo image |
236
249
 
250
+ ---
251
+
237
252
  ### Updating Existing Resources
238
253
 
239
254
  To load existing content that was created with this PageBuilder:
@@ -317,12 +332,18 @@ const existingResourceFromBackend = JSON.stringify([
317
332
 
318
333
  Alternatively, you can provide a raw HTML string containing your `<section>` components:
319
334
 
335
+ ---
336
+
320
337
  ### Customization
321
338
 
322
339
  Customizing the page builder is made simple since all the logic resides in the PageBuilder Class.
323
340
 
324
341
  - Google Fonts (Jost, Cormorant) and Material Icons are automatically loaded when you import the CSS file. No additional setup required for fonts or icons!
325
342
 
343
+ ---
344
+
345
+ ---
346
+
326
347
  ### Custom Components
327
348
 
328
349
  Want to add your own media library or Create custom components that can be injected into the page builder:
@@ -345,6 +366,8 @@ import SearchComponent from './ComponentsPageBuilder/SearchComponent.vue'
345
366
 
346
367
  ## Troubleshooting
347
368
 
369
+ ---
370
+
348
371
  ### Fonts or Icons Not Displaying
349
372
 
350
373
  If fonts (Jost, Cormorant) or Material Icons are not displaying correctly, verify that:
@@ -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.35", t = Le, o = S(!1), n = S(""), i = S(null), s = L(() => t.getConfigPageBuilder), a = function() {
23586
+ const e = "v3.1.37", 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;