@myissue/vue-website-page-builder 3.3.53 → 3.3.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.3.53",
+  "version": "3.3.55",
   "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/Editables/Borders.vue

@@ -102,7 +102,7 @@ watch(
               <div
                 v-if="borderColor !== 'none'"
                 class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border-solid pbx-border pbx-border-gray-100 pbx-rounded-sm"
-                :class="`bg-${borderColor?.replace('border-', '')}`"
+                :class="`pbx-bg-${borderColor?.replace('pbx-border-', '')}`"
               ></div>
               <span class="pbx-block pbx-truncate">{{ borderColor }}</span>
             </span>
@@ -147,7 +147,7 @@ watch(
                     <div
                       v-if="color !== 'none'"
                       class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-bg-gray-950"
-                      :class="`bg-${color.replace('border-', '')}`"
+                      :class="`pbx-bg-${color.replace('pbx-border-', '')}`"
                     ></div>
                     <span v-if="color === 'none'" class="pbx-ml-3">Transparent</span>
                     <span v-if="color !== 'none'" class="pbx-ml-3">{{ color }}</span>

package/src/Components/PageBuilder/EditorMenu/Editables/ClassEditor.vue

@@ -6,13 +6,10 @@ import { getPageBuilder } from '../../../../composables/builderInstance'
 
 const pageBuilderService = getPageBuilder()
 
-// Use shared store instance
 const pageBuilderStateStore = sharedPageBuilderStore
 
 const currentClasses = ref(null)
-const getCurrentClasses = computed(() => {
-  return pageBuilderStateStore.getCurrentClasses
-})
+const getCurrentClasses = computed(() => pageBuilderStateStore.getCurrentClasses)
 
 watch(
   getCurrentClasses,
@@ -23,9 +20,28 @@ watch(
 )
 
 const inputClass = ref('')
+const errorMessage = ref('') // <-- error message reactive ref
 
-const handleAddClasses = async function () {
-  pageBuilderService.handleAddClasses(inputClass.value)
+const handleAddClasses = async () => {
+  const classToAdd = inputClass.value.trim()
+
+  if (!classToAdd) {
+    errorMessage.value = 'Please enter a class name.'
+    return
+  }
+
+  // Add prefix if missing
+  const prefixedClass = classToAdd.startsWith('pbx-') ? classToAdd : 'pbx-' + classToAdd
+
+  // Check if class already exists
+  if (currentClasses.value?.includes(prefixedClass)) {
+    errorMessage.value = `Class "${prefixedClass}" is already added.`
+    return
+  }
+
+  errorMessage.value = '' // Clear error
+
+  pageBuilderService.handleAddClasses(classToAdd)
   await pageBuilderService.initializeElementStyles()
 
   inputClass.value = ''
@@ -36,6 +52,13 @@ const handleAddClasses = async function () {
   <EditorAccordion>
     <template #title>Generated CSS</template>
     <template #content>
+      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">CSS applied</p>
+
+      <label class="pbx-myPrimaryInputLabel">
+        This is the CSS applied by the builder. Add your own CSS and press Enter to apply it to the
+        selected element.
+      </label>
+
       <div class="pbx-flex pbx-flex-row pbx-flex-wrap pbx-gap-2 pbx-mt-2 pbx-mb-4">
         <div
           v-for="className in currentClasses"
@@ -56,28 +79,26 @@ const handleAddClasses = async function () {
         </div>
       </div>
 
-      <div class="pbx-flex pbx-gap-2 pbx-item-center pbx-flex-col">
+      <div>
+        <label class="pbx-myPrimaryInputLabel">
+          Add your CSS.
+          <br />
+          The pbx- prefix is added automatically.
+        </label>
         <div class="pbx-flex pbx-gap-2 pbx-item-center">
-          <div
-            class="pbx-mt-1 pbx-relative pbx-flex pbx-items-center pbx-w-full pbx-border-solid pbx-border pbx-myPrimaryInput pbx-py-0 pbx-p-0"
-          >
-            <input
-              v-model="inputClass"
-              type="text"
-              placeholder="Type class"
-              @keydown.enter="handleAddClasses()"
-              autocomplete="off"
-              class="pbx-myPrimaryInput pbx-border-none pbx-rounded-r-none pbx-ml-0 pbx-w-full"
-            />
-            <div
-              class="pbx-border-none pbx-rounded pbx-flex pbx-items-center pbx-justify-center pbx-h-full pbx-w-8"
-            >
-              <kbd class="pbx-myPrimaryParagraph pbx-text-gray-400 pbx-border-none"> ⏎ </kbd>
-            </div>
-          </div>
+          <input
+            v-model="inputClass"
+            type="text"
+            placeholder="Type class"
+            @keydown.enter="handleAddClasses()"
+            autocomplete="off"
+            class="pbx-myPrimaryInput"
+          />
+
+          <button @click="handleAddClasses" type="button" class="pbx-myPrimaryButton">Add</button>
         </div>
-        <p class="pbx-myPrimaryInputError"></p>
       </div>
+      <p v-if="errorMessage" class="pbx-myPrimaryInputError">{{ errorMessage }}</p>
     </template>
   </EditorAccordion>
 </template>

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

@@ -15,6 +15,7 @@ import TipTap from '../../TipTap/TipTap.vue'
 import EditGetElement from './Editables/EditGetElement.vue'
 import ElementEditor from './Editables/ElementEditor.vue'
 import { getPageBuilder } from '../../../composables/builderInstance'
+import EditorAccordion from '../EditorMenu/EditorAccordion.vue'
 const pageBuilderService = getPageBuilder()
 // Use shared store instance
 const pageBuilderStateStore = sharedPageBuilderStore
@@ -62,6 +63,15 @@ function onScroll() {
     lastScrollTop = scrollContainer.value.scrollTop
   }
 }
+
+// handle download HTML
+const handleDownloadHTML = function () {
+  downloadedComponents.value = getComponents.value.map((component) => {
+    return component.html_code
+  })
+
+  generateHTML('downloaded_html.html', downloadedComponents.value.join(''))
+}
 </script>
 
 <template>
@@ -119,11 +129,25 @@ function onScroll() {
         </article>
       </div>
 
-      <div>
-        <article class="pbx-my-1 pbx-bg-white">
-          <ElementEditor></ElementEditor>
-        </article>
-      </div>
+      <article class="pbx-my-1 pbx-bg-white">
+        <EditorAccordion>
+          <template #title>Download HTML</template>
+          <template #content>
+            <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">
+              Download Page as HTML
+            </p>
+
+            <div class="pbx-mt-4">
+              <button @click="handleDownloadHTML" type="button" class="pbx-myPrimaryButton">
+                Download HTML file
+              </button>
+            </div>
+          </template>
+
+          <!-- Download Layout HTML - end -->
+        </EditorAccordion>
+      </article>
+
       <article class="pbx-mt-1 pbx-bg-white"></article>
     </div>
   </div>

package/src/Components/PageBuilder/Settings/PageBuilderSettings.vue

@@ -34,15 +34,6 @@ const generateHTML = function (filename, HTML) {
 
   document.body.removeChild(element)
 }
-
-// handle download HTML
-const handleDownloadHTML = function () {
-  downloadedComponents.value = getComponents.value.map((component) => {
-    return component.html_code
-  })
-
-  generateHTML('downloaded_html.html', downloadedComponents.value.join(''))
-}
 </script>
 
 <template>
@@ -577,21 +568,6 @@ const handleDownloadHTML = function () {
       </div>
     </div>
     <!-- Advanced Settings - end -->
-    <!-- Download Layout HTML - start -->
-    <div
-      class="pbx-mt-4 pbx-mb-4 pbx-py-8 pbx-px-2 pbx-border pbx-border-solid pbx-border-gray-600 pbx-rounded-xl"
-    >
-      <div class="pbx-flex pbx-items-left pbx-flex-col pbx-gap-1">
-        <h3 class="pbx-myQuaternaryHeader">Download Page as HTML</h3>
-        <p class="pbx-myPrimaryParagraph pbx-text-xs">Download current page layout.</p>
-      </div>
-      <div class="pbx-mt-4">
-        <button @click="handleDownloadHTML" type="button" class="pbx-myPrimaryButton">
-          Download HTML file
-        </button>
-      </div>
-    </div>
-    <!-- Download Layout HTML - end -->
 
     <!-- Congig - start -->
     <div

package/src/DemoComponents/HomeSection.vue

@@ -74,7 +74,7 @@ const configPageBuilder = {
   userSettings: {
     theme: 'light',
     language: 'en',
-    autoSave: false,
+    autoSave: true,
   },
   settings: {
     brandColor: '#DB93B0',

package/src/composables/PageBuilderService.ts

@@ -850,22 +850,24 @@ export class PageBuilderService {
   handleAddClasses(userSelectedClass: string): void {
     if (
       typeof userSelectedClass === 'string' &&
-      userSelectedClass !== '' &&
+      userSelectedClass.trim() !== '' &&
       !userSelectedClass.includes(' ') &&
-      // Check if class already exists
-      !this.getElement.value?.classList.contains(userSelectedClass)
+      // Check if class (with prefix) already exists
+      !this.getElement.value?.classList.contains('pbx-' + userSelectedClass.trim())
     ) {
-      // Remove any leading/trailing spaces
       const cleanedClass = userSelectedClass.trim()
 
-      this.getElement.value?.classList.add(cleanedClass)
+      // Add prefix if missing
+      const prefixedClass = cleanedClass.startsWith('pbx-') ? cleanedClass : 'pbx-' + cleanedClass
 
-      this.pageBuilderStateStore.setElement(this.getElement.value)
+      console.log('Adding class:', prefixedClass)
+
+      this.getElement.value?.classList.add(prefixedClass)
 
-      this.pageBuilderStateStore.setClass(userSelectedClass)
+      this.pageBuilderStateStore.setElement(this.getElement.value)
+      this.pageBuilderStateStore.setClass(prefixedClass)
     }
   }
-
   handleFontFamily(userSelectedFontFamily?: string): void {
     this.#applyElementClassChanges(
       userSelectedFontFamily,