@myissue/vue-website-page-builder 3.4.12 → 3.4.14
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 +26 -0
- package/dist/vue-website-page-builder.js +365 -341
- package/dist/vue-website-page-builder.umd.cjs +35 -30
- package/package.json +1 -1
- package/src/App.vue +1 -1
- package/src/Components/PageBuilder/EditorMenu/EditorAccordion.vue +1 -1
- package/src/services/PageBuilderService.ts +43 -0
package/README.md
CHANGED
|
@@ -40,6 +40,7 @@
|
|
|
40
40
|
- [Publish Button](#publish-button)
|
|
41
41
|
- [Styling the Main Page Builder Container](#styling-the-main-page-builder-container)
|
|
42
42
|
- [Download HTML File](#download-html-file)
|
|
43
|
+
- [Exporting Used CSS Classes](#exporting-used-css-classes)
|
|
43
44
|
- [Custom Components](#custom-components)
|
|
44
45
|
- [Custom Media Library Component](#custom-media-library-component)
|
|
45
46
|
- [Integrate Unsplash Library](#integrate-unsplash-library)
|
|
@@ -716,6 +717,31 @@ const configPageBuilder = {
|
|
|
716
717
|
} as const
|
|
717
718
|
```
|
|
718
719
|
|
|
720
|
+
## Exporting Used CSS Classes
|
|
721
|
+
|
|
722
|
+
```ts
|
|
723
|
+
const cssExport = pageBuilderService.exportCssFromPageBuilder()
|
|
724
|
+
console.log(cssExport)
|
|
725
|
+
```
|
|
726
|
+
|
|
727
|
+
Sample Output:
|
|
728
|
+
|
|
729
|
+
```
|
|
730
|
+
/* Classes used in this page (for Tailwind or custom CSS):
|
|
731
|
+
.lg:pbx-grid-cols-2
|
|
732
|
+
.lg:pbx-grid-cols-3
|
|
733
|
+
.lg:pbx-px-4
|
|
734
|
+
.lg:pbx-text-4xl
|
|
735
|
+
...
|
|
736
|
+
.pbx-w-full
|
|
737
|
+
.sm:pbx-grid-cols-2
|
|
738
|
+
.sm:pbx-grid-cols-3
|
|
739
|
+
*/
|
|
740
|
+
|
|
741
|
+
```
|
|
742
|
+
|
|
743
|
+
You can copy these class names into your tailwind.config.js safelist if you use Tailwind, or use them for debugging and documentation.
|
|
744
|
+
|
|
719
745
|
## Custom Components
|
|
720
746
|
|
|
721
747
|
If you want to use your own components—whether custom-designed or tailored to your application's needs—you can inject them directly into the builder.
|