@myissue/vue-website-page-builder 3.4.13 → 3.4.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.4.13",
+  "version": "3.4.14",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

package/src/Components/PageBuilder/EditorMenu/EditorAccordion.vue

@@ -4,7 +4,7 @@
     :class="{ '': expanded }"
   >
     <div
-      class="pbx-flex pbx-flex-row pbx-justify-between pbx-items-center pbx-pl-3 pbx-pr-3 pbx-py-5 pbx-cursor-pointer pbx-duration-200 pbx-bg-white hover:pbx-bg-myPrimaryLightGrayColor"
+      class="pbx-flex pbx-flex-row pbx-justify-between pbx-items-center pbx-pl-3 pbx-pr-3 pbx-py-5 pbx-cursor-pointer pbx-duration-200 pbx-bg-white hover:pbx-bg-myPrimaryLightGrayColor pbx-select-none"
       @click="expanded = !expanded"
     >
       <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-my-0 pbx-py-0">

package/src/services/PageBuilderService.ts

@@ -2271,6 +2271,49 @@ export class PageBuilderService {
     return false
   }
 
+  /**
+   * Exports all CSS used in the builder as a string.
+   * - Includes all inline styles and a list of all classes used.
+   * - If you use Tailwind, classes are your main "CSS".
+   * - If you have custom CSS, you can also include it here.
+   */
+  public exportCssFromPageBuilder(): string {
+    const pagebuilder = document.querySelector('#pagebuilder')
+    if (!pagebuilder) return ''
+
+    // Collect all inline styles
+    const inlineStyles: string[] = []
+    pagebuilder.querySelectorAll('[style]').forEach((el) => {
+      const selector = el.id
+        ? `#${el.id}`
+        : el.className
+          ? `.${Array.from(el.classList).join('.')}`
+          : el.tagName.toLowerCase()
+      inlineStyles.push(`${selector} { ${el.getAttribute('style')} }`)
+    })
+
+    // Collect all classes used
+    const classSet = new Set<string>()
+    pagebuilder.querySelectorAll('[class]').forEach((el) => {
+      el.className
+        .split(/\s+/)
+        .filter(Boolean)
+        .forEach((cls) => classSet.add(cls))
+    })
+
+    // Optionally, output as a CSS comment block
+    const classesComment =
+      '/* Classes used in this page (for Tailwind or custom CSS):\n' +
+      Array.from(classSet)
+        .sort()
+        .map((cls) => `.${cls}`)
+        .join('\n') +
+      '\n*/'
+
+    // Combine everything
+    return [classesComment, ...inlineStyles].join('\n\n')
+  }
+
   /**
    * Applies a selected image to the current element.
    * @param {ImageObject} image - The image object to apply.