@myissue/vue-website-page-builder 3.5.65 → 3.5.67

package/README.md

@@ -1,12 +1,14 @@
 <p align="center" dir="auto">
-<img width="200" style="max-width: 100%;" src="./public/logo/logo.svg" alt="Vue Website Page Builder Logo" />
+<img width="200" style="max-width: 100%;" src="./public/logo/logo.svg" alt="Vue Website Page Builder Logo — open source Vue 3 page builder by MyBuilder" />
 </p>
 
-# Vue 3 Page Builder — Free, Self-Hosted, Integration-First
+# Vue 3 Page Builder — Free Open-Source Visual Editor for Ecommerce Admin, SaaS & Headless CMS
 
-**The Vue page builder for ecommerce admin panels, multi-tenant SaaS, and API-backed CMS dashboards.** Embed a visual editor in your product, connect your own media library and product catalog, and save portable HTML to your backend.
+**[MyBuilder](https://mybuilder.dev)** is a **free, open-source, self-hosted Vue 3 page builder** you embed in your own product — not a locked hosted CMS. Use it as a **drag-and-drop visual editor** for **ecommerce admin panels**, **multi-tenant SaaS**, and **API-backed headless CMS** dashboards. Connect your media library and product catalog, then save portable HTML to your backend.
 
-- [Vue 3 Page Builder — Free, Self-Hosted, Integration-First](#vue-3-page-builder--free-self-hosted-integration-first)
+Search-friendly aliases: Vue page builder · Vue website builder · open source page builder · self-hosted page builder · drag and drop editor for Vue · ecommerce page builder · headless CMS visual editor · Builder.io alternative for Vue · GrapesJS alternative for Vue 3.
+
+- [Vue 3 Page Builder — Free Open-Source Visual Editor for Ecommerce Admin, SaaS \& Headless CMS](#vue-3-page-builder--free-open-source-visual-editor-for-ecommerce-admin-saas--headless-cms)
   - [Demo](#demo)
   - [Guide \& Documentation](#guide--documentation)
   - [Built for Ecommerce Admin \& Multi-Tenant SaaS](#built-for-ecommerce-admin--multi-tenant-saas)
@@ -14,6 +16,7 @@
   - [Who This Is For](#who-this-is-for)
   - [Backend and CMS Integration](#backend-and-cms-integration)
   - [Why Choose This Vue Page Builder](#why-choose-this-vue-page-builder)
+  - [Open-Source Vue Page Builder vs Hosted Platforms](#open-source-vue-page-builder-vs-hosted-platforms)
   - [Overview](#overview)
   - [Get Started in Minutes](#get-started-in-minutes)
   - [About](#about)
@@ -192,6 +195,27 @@ Many page builders are heavy, opinionated, or tied to one CMS. This project focu
 
 This is a general-purpose builder by design. It does not try to replace your backend, authentication, permissions, CDN, or publishing workflow. It gives your product a visual editor while letting your platform stay in charge of data, scale, security, and deployment.
 
+## Open-Source Vue Page Builder vs Hosted Platforms
+
+Large vendors win on brand recognition and sales teams. This project wins when you need a **Vue-native, self-hosted page builder** inside software you already own. If you are comparing an open-source Vue page builder to hosted visual CMS platforms, this is the honest fit:
+
+| Concern | How this builder addresses it |
+|--------|--------------------------------|
+| **Vendor lock-in** | MIT-licensed, npm package, runs in **your** Vue/Nuxt/Laravel admin. You keep HTML, auth, and hosting. |
+| **Data, GDPR & compliance** | Content never has to leave your infrastructure. You apply **your** policies, audit trail, and region hosting — not a third-party editor cloud. |
+| **Roles & collaboration** | Permissions, SSO, and multi-user workflows stay in **your** product (where enterprises already invest). The builder is the visual layer. |
+| **Support & SLAs** | Community + docs for the editor; **your** team owns production SLAs for the full stack — or hire [customization support](https://mybuilder.dev). |
+| **Ecosystem & integrations** | Integration-first hooks: `:CustomMediaLibraryComponent`, `:DisplayProducts`, TypeScript APIs, portable HTML — plug Shopify, WooCommerce, S3, Cloudinary, Strapi, Directus, or custom APIs. |
+| **Scale & traffic** | The builder is for **authoring**. Public traffic hits **your** CDN, storefront, and database — the same pattern used by serious headless setups. |
+| **Bundle & performance** | Ship the editor to admin users only; publish lean HTML to the public site. Tree-shake and lazy-load the builder where needed. |
+| **Long-term ownership** | You can fork, patch, and extend. No forced plan upgrades or “editor disappeared from the marketplace” risk. |
+
+**Best alternative when:** you want a **Builder.io-style or GrapesJS-style experience**, but as an **embeddable Vue 3 component** with ecommerce product sections, custom media, draft autosave, SEO checks, and HTML you store yourself.
+
+**Not a replacement for:** a full hosted CMS with built-in A/B testing, managed CDN, and enterprise procurement packs out of the box — and that is intentional. Pair this open-source page builder with the platform you already trust for those jobs.
+
+Live product: [mybuilder.dev](https://mybuilder.dev) · Docs: [Guides](https://myissue-studio.github.io/vue-website-page-builder/) · npm: `@myissue/vue-website-page-builder`
+
 ## Overview
 
 If you're a Vue 3 developer, this builder feels right at home. It installs quickly via npm and supports full customization through props and configuration objects. You can even set specific user settings like image, name, theme, language, company logo, and autosave preferences, making it a personalized experience for every user.
@@ -217,40 +241,51 @@ A Page Builder designed for growth. Build your website pages with ready-made com
 
 ## Real-World Application Example
 
-From solo freelancers to fast-growing startups and established enterprises, the Page Builder is trusted by teams everywhere. With its intuitive click-and-drop editor, real-time visual editing, and a rich library of reusable components, you can turn ideas into polished pages in minutes. Built for merchants, brands, and agencies, it empowers anyone to create high-impact content.
+The Vue Website Page Builder is built for production admin products: merchants and editors design landing pages, collection pages, and campaign blocks while your platform owns catalog, checkout, auth, and hosting.
+
+A live reference implementation is **[myself.ae](https://myself.ae)** / **[mybuilder.dev](https://mybuilder.dev)** — a Vue-based visual editor with product sections, media integration, responsive components, and HTML persistence suitable for ecommerce and multi-tenant SaaS.
+
+**Typical production shape:**
 
-Discover how the Vue Website Page Builder is empowering businesses to create dynamic and responsive web pages. Used by teams at myself.ae, Zara, H&M, Chanel, BOSS, DKNY, Aldo, Bershka, Furla, Pandora, The New York Times, and Pentagram — the builder powers engaging, user-friendly pages across fashion, retail, media, and design.
+1. Embed `PageBuilder` in your Vue or Nuxt admin  
+2. Inject your media library and product catalog  
+3. Autosave drafts locally; publish full HTML to your API  
+4. Serve that HTML on your storefront or marketing site behind your CDN  
+
+That model gives medium and large product teams what procurement usually asks for — **control of data, security boundaries, and deployment** — without replacing your existing CMS or commerce stack.
 
 <br>
 
-<h3 align="center">Teams from top companies building using this page builder</h3>
+<h3 align="center">Built for retail, fashion, media, and brand content workflows</h3>
 
 <p align="center">
-  <img src="./public/logo/top-companies/myself.ae.jpg" width="80" height="80" alt="myself.ae" title="myself.ae" />
+  <img src="./public/logo/top-companies/myself.ae.jpg" width="80" height="80" alt="myself.ae — Vue page builder product example" title="myself.ae" />
   &nbsp;&nbsp;
-  <img src="./public/logo/top-companies/zara.jpg" width="80" height="80" alt="Zara" title="Zara" />
+  <img src="./public/logo/top-companies/zara.jpg" width="80" height="80" alt="Fashion retail landing page use case" title="Fashion retail" />
   &nbsp;&nbsp;
-  <img src="./public/logo/top-companies/hm.png" width="80" height="80" alt="H&amp;M" title="H&amp;M" />
+  <img src="./public/logo/top-companies/hm.png" width="80" height="80" alt="Retail campaign page use case" title="Retail campaigns" />
   &nbsp;&nbsp;
-  <img src="./public/logo/top-companies/chanel.avif" width="80" height="80" alt="Chanel" title="Chanel" />
+  <img src="./public/logo/top-companies/chanel.avif" width="80" height="80" alt="Luxury brand content page use case" title="Brand content" />
   <br><br>
-  <img src="./public/logo/top-companies/boss.jpg" width="80" height="80" alt="BOSS" title="BOSS" />
+  <img src="./public/logo/top-companies/boss.jpg" width="80" height="80" alt="Apparel ecommerce page use case" title="Apparel ecommerce" />
   &nbsp;&nbsp;
-  <img src="./public/logo/top-companies/dkny.jpg" width="80" height="80" alt="DKNY" title="DKNY" />
+  <img src="./public/logo/top-companies/dkny.jpg" width="80" height="80" alt="Lifestyle brand page use case" title="Lifestyle brands" />
   &nbsp;&nbsp;
-  <img src="./public/logo/top-companies/aldo.jpg" width="80" height="80" alt="Aldo" title="Aldo" />
+  <img src="./public/logo/top-companies/aldo.jpg" width="80" height="80" alt="Product collection page use case" title="Collection pages" />
   &nbsp;&nbsp;
-  <img src="./public/logo/top-companies/bershka.jpg" width="80" height="80" alt="Bershka" title="Bershka" />
+  <img src="./public/logo/top-companies/bershka.jpg" width="80" height="80" alt="Youth retail marketing page use case" title="Marketing pages" />
   <br><br>
-  <img src="./public/logo/top-companies/furla.jpg" width="80" height="80" alt="Furla" title="Furla" />
+  <img src="./public/logo/top-companies/furla.jpg" width="80" height="80" alt="Accessories brand page use case" title="Brand pages" />
   &nbsp;&nbsp;
-  <img src="./public/logo/top-companies/pandora.jpg" width="80" height="80" alt="Pandora" title="Pandora" />
+  <img src="./public/logo/top-companies/pandora.jpg" width="80" height="80" alt="Jewelry ecommerce content use case" title="Ecommerce content" />
   &nbsp;&nbsp;
-  <img src="./public/logo/top-companies/bottega_veneta.png" width="80" height="80" alt="Bottega Veneta" title="Bottega Veneta" />
+  <img src="./public/logo/top-companies/bottega_veneta.png" width="80" height="80" alt="Premium retail page use case" title="Premium retail" />
   &nbsp;&nbsp;
-  <img src="./public/logo/top-companies/charles_keith.jpg" width="80" height="80" alt="Charles & Keith" title="Charles & Keith" />
+  <img src="./public/logo/top-companies/charles_keith.jpg" width="80" height="80" alt="Storefront editorial page use case" title="Editorial pages" />
 </p>
 
+<p align="center"><em>Industry examples of the page types teams build — fashion, retail, and brand landing pages — using a self-hosted Vue visual editor connected to their own catalog and CMS.</em></p>
+
 <br>
 
 ## Reviews, Ratings, and User Testimonials

package/dist/index.d.ts

@@ -107,6 +107,7 @@ export declare function buildProductSectionHtml(products: ReadonlyArray<PageBuil
 
 declare interface BuildProductSectionStyleOptions {
     cardStyle?: ProductCardStyle;
+    cardDesign?: ProductCardDesign;
     roundedImages?: boolean;
     openInNewTab?: boolean;
     buttonStyle?: ProductButtonStyle;
@@ -159,6 +160,8 @@ export declare interface InsertProductsOptions {
     layout?: ProductGridLayout;
     mobileColumns?: ProductMobileColumns;
     cardStyle?: ProductCardStyle;
+    /** Layout/typography preset for product cards */
+    cardDesign?: ProductCardDesign;
     /** Adds rounded corners to product images */
     roundedImages?: boolean;
     /** Adds target="_blank" rel="noopener noreferrer" to product links */
@@ -230,6 +233,12 @@ export declare interface PageBuilderConfig {
         };
         autoSave?: boolean;
         notifications?: boolean;
+        /**
+         * When `true`, TipTap editors hide the H1 control and do not allow creating
+         * level-1 headings (H2–H6 remain available). Useful when the host page already
+         * owns the single page `<h1>` outside the builder.
+         */
+        disableH1?: boolean;
         /**
          * Default canvas font and, optionally, the restricted set of fonts shown in
          * the font-family picker.
@@ -551,7 +560,12 @@ export declare class PageBuilderService {
         hasButtons: boolean;
         hasLinks: boolean;
     };
-    updateSelectedProductSection(options: ProductSectionOptions): Promise<void>;
+    updateSelectedProductSection(options: ProductSectionOptions, applyOptions?: {
+        persist?: boolean;
+    }): Promise<void>;
+    /** Prefer the live canvas section; getElement can point at a detached remount leftover. */
+    private resolveLiveSelectedProductSection;
+    private findProductSectionByComponentId;
     /**
      * Returns true when the global page wrapper has the full-width class applied.
      */
@@ -565,6 +579,12 @@ export declare class PageBuilderService {
     isSelectedElementImage(): boolean;
     setImageSettingsModalOpen(open: boolean): void;
     isImageSettingsModalOpen(): boolean;
+    /**
+     * Closes Image Settings after flushing live DOM changes.
+     * Remounts once so Pinia matches the canvas, then re-selects the same image
+     * (autosave remounts during the panel would drop selection mid-edit).
+     */
+    closeImageSettingsModal(): Promise<void>;
     private findImageAspectClass;
     private removeImageAspectClasses;
     handleImageObjectFit(userSelection?: string): void;
@@ -861,6 +881,11 @@ export declare class PageBuilderService {
      * after it in the DOM, then syncs the change to the store.
      */
     duplicateElementInDOM(): Promise<void>;
+    /**
+     * When duplicating an element under a sibling (e.g. stacking images in a slide),
+     * ensure the copy has top spacing so it doesn't sit flush against the original.
+     */
+    private ensureVerticalGapOnStackedDuplicate;
     /**
      * Deletes the currently selected element from the DOM and stores it for potential restoration.
      * @returns {Promise<void>}
@@ -915,7 +940,7 @@ export declare class PageBuilderService {
     /**
      * Generates a preview of the current page design.
      */
-    previewCurrentDesign(): void;
+    previewCurrentDesign(): Promise<void>;
     /**
      * Sanitizes a string to be used as a key in local storage.
      * @param {string} input - The string to sanitize.
@@ -1043,6 +1068,8 @@ export declare class PageBuilderService {
      * @returns {Promise<void>}
      */
     applySelectedImage(image: ImageObject): Promise<void>;
+    /** After v-html remount, select the slider image we just updated (same src + active slide). */
+    private reselectSliderImageAfterRemount;
     /**
      * Sets the base primary image from the currently selected element if it's an image.
      * @private
@@ -1071,8 +1098,15 @@ export declare class PageBuilderService {
     addTheme(components: string): Promise<void>;
     /**
      * Replaces the entire page with a theme template (clears existing sections first).
+     * Also resets Page Design global classes/styles so theme layouts are not mixed
+     * with leftover page-wide font/color/background settings.
      */
     replaceTheme(themeHtml: string): Promise<void>;
+    /**
+     * Clears #pagebuilder Page Design classes/styles and runtime pageSettings so a
+     * full-page theme is not overridden by previous global page styles.
+     */
+    private resetPageDesignSettingsForThemeReplace;
     getPageMeta(): PageMeta;
     setPageMeta(partial: Partial<PageMeta>): Promise<void>;
     analyzeSEO(): Promise<SEOSummary>;
@@ -1274,6 +1308,9 @@ export declare type PassedComponentHtmlWarning = {
 
 declare type ProductButtonStyle = 'text' | 'button' | (string & {});
 
+/** Product card layout/typography preset (orthogonal to border/shadow Card style). */
+export declare type ProductCardDesign = 'classic' | 'modern' | 'minimal' | (string & {});
+
 export declare type ProductCardStyle = 'minimal' | 'bordered' | 'shadow' | 'elevated' | (string & {});
 
 export declare type ProductGridLayout = 'grid-1' | 'grid-2' | 'grid-3' | 'grid-4' | 'grid-6' | (string & {});
@@ -1284,6 +1321,8 @@ export declare interface ProductSectionOptions {
     layout: ProductGridLayout;
     mobileColumns?: ProductMobileColumns;
     cardStyle?: ProductCardStyle;
+    /** Layout/typography preset for product cards */
+    cardDesign?: ProductCardDesign;
     roundedImages?: boolean;
     openInNewTab?: boolean;
     /** Product CTA appearance: plain text link or button style */
@@ -1549,6 +1588,7 @@ export declare const usePageBuilderStateStore: StoreDefinition<"pageBuilderState
                 } | undefined;
                 autoSave?: boolean | undefined;
                 notifications?: boolean | undefined;
+                disableH1?: boolean | undefined;
                 fontFamily?: string | undefined;
                 elementFonts?: {
                     h1?: string | undefined;