@myissue/vue-website-page-builder 3.0.17 → 3.0.19

package/README.md

@@ -1,20 +1,14 @@
-# @myissue/vue-website-page-builder
-
-## 🚧 **DEVELOPMENT VERSION - NOT READY FOR PRODUCTION** 🚧
+<p align="center" dir="auto">
+<img width="200" style="max-width: 100%;" src="./public/logo/logo.svg" alt="Logo">
+</p>
 
-> **⚠️ WARNING**: This package is currently in **alpha development stage**.
->
-> - **DO NOT USE IN PRODUCTION** applications
-> - APIs may change without notice
-> - Features may be incomplete or unstable
-> - Documentation is work in progress
-> - Use only for testing and development purposes
+## **DEVELOPMENT VERSION - NOT READY FOR PRODUCTION**
 
----
+# Free Click & Drop Page Builder
 
 ## Overview
 
-A Vue.js page builder component with drag & drop functionality for creating dynamic web pages.
+A Vue 3 page builder component with drag & drop functionality for creating dynamic web pages.
 
 ## Installation
 
@@ -22,63 +16,7 @@ A Vue.js page builder component with drag & drop functionality for creating dyna
 npm install @myissue/vue-website-page-builder
 ```
 
-## Quick Start
-
-```vue
-<script setup>
-import { PageBuilder } from '@myissue/vue-website-page-builder'
-import '@myissue/vue-website-page-builder/style.css'
-</script>
-
-<template>
-  <PageBuilder />
-</template>
-```
-
-## Features
-
-- 🎯 **Zero Configuration** - Just import and use
-- 🔧 **Self-contained** - Manages its own state internally
-- 🎨 **Drag & Drop** - Visual page building experience
-- 📱 **Responsive** - Mobile-friendly interface
-- ⚡ **Vue 3** - Built with modern Vue.js
-
-## Development Status
-
-| Feature            | Status         |
-| ------------------ | -------------- |
-| Basic Page Builder | 🟡 Alpha       |
-| Component Library  | 🟡 Alpha       |
-| State Management   | 🟡 Alpha       |
-| Documentation      | 🔴 In Progress |
-| Testing            | 🔴 Not Started |
-| Stable API         | 🔴 Not Ready   |
-
-## Requirements
-
-- Node.js ≥ 18.0.0
-- Vue.js ≥ 3.0.0
-- Modern browser with ES6+ support
-
-## License
-
-MIT License - see LICENSE file for details
-
-## Author
-
-**qaiswardag**
-
-- GitHub: [@qaiswardag](https://github.com/qaiswardag)
-
----
-
-> 🚧 **Remember**: This is a development version. Wait for v1.0.0 for production use!
-
-<p align="center" dir="auto">
-<img width="200" style="max-width: 100%;" src="./public/logo/logo.svg" alt="Logo">
-</p>
-
-# Free Click & Drop Page Builder
+## Click & Drop Page Builder
 
 [Play around with the page builder](https://www.builder-demo.myissue.dk)
 
@@ -130,10 +68,14 @@ agencies. Empower users to create the perfect content with the Page Builder.
 
 ## Documentation
 
-### Required software installation
+### Requirements
 
 Please note that these instructions assume you have Node.js installed.
 
+- Node.js ≥ 18.0.0
+- Vue.js ≥ 3.0.0
+- Modern browser with ES6+ support
+
 ### Getting started & installation
 
 Make sure to install the dependencies:
@@ -152,13 +94,48 @@ yarn install
 bun install
 ```
 
-### Customization
+### Quick Start
 
-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`.
+```vue
+<script setup>
+import { PageBuilder } from '@myissue/vue-website-page-builder'
+import '@myissue/vue-website-page-builder/style.css'
+</script>
+
+<template>
+  <PageBuilder />
+</template>
+```
+
+### Customization
 
 Customizing the page builder is made simple since all the logic resides in the PageBuilder Class.
 
-### Example use of Page Builder
+### Custom Components
+
+Want to add your own media library or search functionality? Create custom components that can be injected into the page builder:
+
+📚 **[Custom Components Setup Guide](./CUSTOM_COMPONENTS_SETUP.md)** - Learn how to create and integrate your own components
+
+Example integration:
+
+```vue
+<script setup>
+import { PageBuilder } from '@myissue/vue-website-page-builder'
+import MediaLibraryComponent from './ComponentsPageBuilder/MediaLibraryComponent.vue'
+import SearchComponent from './ComponentsPageBuilder/SearchComponent.vue'
+</script>
+
+<template>
+  <PageBuilder :MediaLibraryComponent="MediaLibraryComponent" :SearchComponent="SearchComponent" />
+</template>
+```
+
+### Company Logo
+
+You can display your company logo in the page builder interface by passing a logo URL to the `PageBuilderLogo` prop. When provided, the logo will appear in the top toolbar of the page builder.
+
+#### Basic Usage
 
 ```vue
 <script setup>
@@ -167,13 +144,34 @@ import '@myissue/vue-website-page-builder/style.css'
 </script>
 
 <template>
-  <PageBuilder />
+  <PageBuilder PageBuilderLogo="/logo/square-logo.svg" />
 </template>
 ```
 
-## License
+#### Configuration Options
 
-[MIT License](./LICENSE)
+| Prop              | Type     | Default | Description                         |
+| ----------------- | -------- | ------- | ----------------------------------- |
+| `PageBuilderLogo` | `String` | `null`  | URL path to your company logo image |
+
+#### Examples
+
+**With company logo:**
+
+```vue
+<PageBuilder PageBuilderLogo="/logo/square-logo.svg" />
+```
+
+```
+
+#### Logo Requirements
+
+- **Format**: SVG, PNG, or JPG recommended
+- **Size**: Optimized for 24px height (width will scale proportionally)
+- **Path**: Can be absolute URL, relative path, or imported asset
+- **Accessibility**: Include appropriate alt text (automatically set to "Logo")
+
+The logo will be displayed with a subtle border separator and proper spacing in the page builder toolbar.
 
 ## Contributing
 
@@ -182,3 +180,8 @@ import '@myissue/vue-website-page-builder/style.css'
 3. Make your changes
 4. Build and test locally
 5. Submit a pull request
+
+## License
+
+[MIT License](./LICENSE)
+```