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

package/README.md

@@ -5,7 +5,10 @@
 ## **DEVELOPMENT VERSION - NOT READY FOR PRODUCTION**
 
 🚀 **Official Launch Date: June 15, 2025**  
-_We're working hard to bring you a production-ready page builder. Stay tuned for updates!_
+We're working hard to bring you a production-ready page builder. Stay tuned for updates!
+
+You are welcome to test the builder and report any bugs or feedback before the official launch date.  
+Your input will help us deliver a more stable and feature-rich release!
 
 # Free Click & Drop Page Builder
 
@@ -23,9 +26,9 @@ npm install @myissue/vue-website-page-builder
 
 ## Click & Drop Page Builder
 
-[Play around with the page builder](https://www.builder-demo.myissue.dk)
+[Play around with the Page Builder](https://www.builder-demo.myissue.dk)
 
-Born out of desire to create a minimalist page builder with an elegant and intuitive design.
+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.
 
@@ -33,10 +36,10 @@ To star the repository, simply click on the **Star** button located at the top-r
 
 ## Demo
 
-Introducing the **The LightweightFree Vue Click & Drop Page Builder**
+Introducing the **The Lightweight Free Vue Click & Drop Page Builder**
 create and enhance digital experiences with Vue on any backend.
 
-[Play around with the page builder](https://www.builder-demo.myissue.dk)
+[Play around with the Page Builder](https://www.builder-demo.myissue.dk)
 
 ## About
 
@@ -57,7 +60,7 @@ The Page Builder is packed with features:
 - **Media Library**: Access and manage your media files effortlessly.
 - **Unsplash**: Unsplash Integration.
 - **Responsive Editing**: Ensure your site looks great on all devices.
-- **Text Editing**: Customize your text with ease.
+- **Text Editing:** Edit text content live and in real-time.
 - **Font Customization**: Choose the perfect fonts to match your style.
 - **Undo & Redo**: Experiment confidently with the ability to revert changes.
 - **Global Styles**: Global Styles for fonts, designs, & colors.
@@ -68,11 +71,15 @@ agencies. Empower users to create the perfect content with the Page Builder.
 
 ## Technical details
 
-- **Technologies**: This Page Builder is developed using JavaScript, Vue 3, the Composition API, Pinia, CSS, Tailwind CSS, and HTML.
+- **Technologies**: This Page Builder is developed using TypeScript, Vue 3, the Composition API, Pinia, CSS, Tailwind CSS, and HTML.
 - **Features**: Click & Drop Page Builder.
 
+---
+
 ## Documentation
 
+---
+
 ### Requirements
 
 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.
 - Vue.js ≥ 3.0.0
 - Modern browser with ES6+ support
 
+---
+
 ### Getting started & installation
 
 Make sure to install the dependencies:
@@ -99,9 +108,11 @@ yarn install
 bun install
 ```
 
+---
+
 ### Important: CSS Import Required
 
-The page builder requires its CSS file to be imported for proper styling and automatic icon loading:
+The Page Builder requires its CSS file to be imported for proper styling and automatic icon loading:
 
 ```js
 import '@myissue/vue-website-page-builder/style.css'
@@ -109,16 +120,18 @@ import '@myissue/vue-website-page-builder/style.css'
 
 This import automatically includes:
 
-- ✅ Page builder styles
+- ✅ Page Builder styles
 - ✅ Google Fonts (Jost, Cormorant - no additional setup needed)
 - ✅ Google Material Icons (no additional setup needed)
 - ✅ Responsive design utilities
 
+---
+
 ### Quick Start
 
 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.
 
-- The page builder requires its CSS file to be imported for proper styling and automatic icon loading:
+- The Page Builder requires its CSS file to be imported for proper styling and automatic icon loading:
 
 ```vue
 <script setup>
@@ -131,6 +144,8 @@ import '@myissue/vue-website-page-builder/style.css'
 </template>
 ```
 
+---
+
 ### Optional: Provide Config to PageBuilder
 
 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.
@@ -140,7 +155,7 @@ Get up and running quickly by importing the PageBuilder component, setting up yo
   - `pageBuilderLogo` to display your company logo in the builder toolbar
   - `resourceData` to prefill the builder with initial data
   - `userSettings` to set user preferences such as theme, language, or autoSave
-  - `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.
+  - `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.
 
 ```vue
 <script setup>
@@ -175,7 +190,7 @@ const configPageBuilder = {
 const pageBuilderStateStore = sharedPageBuilderStore
 const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
-// Initializing page builder with essential configuration
+// Initializing Page Builder with essential configuration
 pageBuilderClass.setConfigPageBuilder(configPageBuilder)
 </script>
 
@@ -186,9 +201,9 @@ pageBuilderClass.setConfigPageBuilder(configPageBuilder)
 
 ### Company Logo & Logged-in User
 
-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:
+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:
 
-- **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.
+- **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.
 - **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).
 
 **Basic Usage:**
@@ -226,12 +241,14 @@ pageBuilderClass.setConfigPageBuilder(configPageBuilder)
 </template>
 ```
 
-configuration Options
+Configuration Options
 
 | Prop              | Type     | Default | Description                         |
 | ----------------- | -------- | ------- | ----------------------------------- |
 | `PageBuilderLogo` | `String` | `null`  | URL path to your company logo image |
 
+---
+
 ### Updating Existing Resources
 
 To load existing content that was created with this PageBuilder:
@@ -315,12 +332,18 @@ const existingResourceFromBackend = JSON.stringify([
 
 Alternatively, you can provide a raw HTML string containing your `<section>` components:
 
+---
+
 ### Customization
 
 Customizing the page builder is made simple since all the logic resides in the PageBuilder Class.
 
     - Google Fonts (Jost, Cormorant) and Material Icons are automatically loaded when you import the CSS file. No additional setup required for fonts or icons!
 
+---
+
+---
+
 ### Custom Components
 
 Want to add your own media library or Create custom components that can be injected into the page builder:
@@ -343,6 +366,8 @@ import SearchComponent from './ComponentsPageBuilder/SearchComponent.vue'
 
 ## Troubleshooting
 
+---
+
 ### Fonts or Icons Not Displaying
 
 If fonts (Jost, Cormorant) or Material Icons are not displaying correctly, verify that:

package/dist/vue-website-page-builder.js

@@ -23583,7 +23583,7 @@ const F4 = { class: "p-4" }, z4 = { class: "mb-8" }, j4 = { class: "grid grid-co
 }, 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 = {
   __name: "PageBuilderSettings",
   setup(r) {
-    const e = "v3.1.34", t = Le, o = S(!1), n = S(""), i = S(null), s = L(() => t.getConfigPageBuilder), a = function() {
+    const e = "v3.1.37", t = Le, o = S(!1), n = S(""), i = S(null), s = L(() => t.getConfigPageBuilder), a = function() {
       n.value = "Advanced Settings", o.value = !0;
     }, l = function() {
       o.value = !1;