@myissue/vue-website-page-builder 3.3.70 → 3.3.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.3.70",
+  "version": "3.3.72",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",
@@ -18,7 +18,7 @@
       "import": "./dist/vue-website-page-builder.js",
       "require": "./dist/vue-website-page-builder.umd.cjs"
     },
-    "./style.css": "./dist/vue-website-page-builder.css"
+    "./style.css": "./dist/style.css"
   },
   "keywords": [
     "vue",
@@ -79,7 +79,6 @@
     "pinia": "^2.1.7",
     "uuid": "^9.0.0",
     "vue": "^3.5.13",
-    "vue-i18n": "^11.1.9",
     "vue-website-page-builder": "file:"
   },
   "devDependencies": {

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

@@ -121,7 +121,7 @@ watch(
             leave-to-class="pbx-opacity-0"
           >
             <ListboxOptions
-              class="pbx-absolute pbx-z-10 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-white pbx-py-1 pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm"
+              class="pbx-absolute pbx-z-10 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-white pbx-py-1 pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm list-none p-0 m-0"
             >
               <ListboxOption
                 as="template"

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

@@ -67,7 +67,7 @@ watch(
           leave-to-class="pbx-opacity-0"
         >
           <ListboxOptions
-            class="pbx-absolute pbx-z-10 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-white pbx-py-1 pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm"
+            class="pbx-absolute pbx-z-10 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-white pbx-py-1 pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm list-none p-0 m-0"
           >
             <ListboxOption
               as="template"

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

@@ -66,7 +66,7 @@ watch(
           leave-to-class="pbx-opacity-0"
         >
           <ListboxOptions
-            class="pbx-absolute pbx-z-10 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-white pbx-py-1 pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm"
+            class="pbx-absolute pbx-z-10 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-white pbx-py-1 pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm list-none p-0 m-0"
           >
             <ListboxOption
               as="template"

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

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, watch, nextTick } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { sharedPageBuilderStore } from '../../../../stores/shared-store'
 import EditorAccordion from '../EditorAccordion.vue'
 import { getPageBuilder } from '../../../../composables/builderInstance'

package/src/PageBuilder/PageBuilder.vue

@@ -713,19 +713,6 @@ onMounted(async () => {
             getPageBuilderConfig.userSettings.language
           "
         >
-          <div
-            class="pbx-py-4 pbx-px4 pbx-rounded-xl pbx-border pbx-border-gray-400 pbx-bg-red-100 pbx-m-4 pbx-min-w-72 pbx-max-w-4pbx-min-w-72 pbx-w-max"
-          >
-            <p class="pbx-myPrimaryParagraph py-2">
-              Default: {{ getPageBuilderConfig.userSettings.language.default }}
-            </p>
-            <p class="pbx-myPrimaryParagraph py-2">
-              Disabled languages: {{ getPageBuilderConfig.userSettings.language.disable }}
-            </p>
-            <p class="pbx-myPrimaryParagraph py-2">
-              Available languages: {{ JSON.stringify(pageBuilderService.availableLanguage()) }}
-            </p>
-          </div>
         </template>
         <template v-if="showCloseButton">
           <div class="pbx-ml-2">
@@ -742,12 +729,6 @@ onMounted(async () => {
             </button>
           </div>
         </template>
-        <div>
-          <p class="pbx-myPrimaryParagraph py-2">Current language: {{ getCurrentLanguage }}</p>
-        </div>
-        <div>
-          <p class="pbx-myPrimaryParagraph py-2">my dropdown select a laungage</p>
-        </div>
 
         <!-- Close & Publish buttons end -->
       </div>
@@ -792,7 +773,7 @@ onMounted(async () => {
 
         <main
           ref="pbxToolBar"
-          class="pbx-flex pbx-flex-col pbx-grow pbx-rounded-tr-2xl pbx-rounded-tl-2xl pbx-border-solid pbx-border pbx-border-gray-200 pbx-items-stretch pbx-h-[100vh]"
+          class="pbx-flex pbx-flex-col pbx-grow pbx-rounded-tr-2xl pbx-rounded-tl-2xl pbx-border-solid pbx-border pbx-border-gray-200 pbx-items-stretch pbx-h-[100vh] pbx-text-black"
           :class="{ 'pbx-mr-2': !getMenuRight, '': getMenuRight }"
         >
           <div

package/src/composables/builderInstance.ts

@@ -1,24 +1,21 @@
 // builderInstance.ts
 import { PageBuilderService } from '../services/PageBuilderService'
-import { sharedPageBuilderStore } from '../stores/shared-store'
 
 // Singleton instance
 let instance: PageBuilderService | null = null
 
-// Used to create and store the single instance
-export function initPageBuilder(): PageBuilderService {
+// Used by the plugin to set the instance
+export function setBuilderInstance(newInstance: PageBuilderService): void {
   if (!instance) {
-    const pageBuilderStateStore = sharedPageBuilderStore
-    instance = new PageBuilderService(pageBuilderStateStore)
+    instance = newInstance
   }
-  return instance
 }
 
 // Used to access the existing instance anywhere else
 export function getPageBuilder(): PageBuilderService {
   if (!instance) {
     throw new Error(
-      'PageBuilderService has not been created. Please call initPageBuilder() first in your App.vue or setup file.',
+      'PageBuilder has not been initialized. Please call app.use(pageBuilder) in your main application file.',
     )
   }
   return instance

package/src/css/{app.css → style.css}

@@ -495,3 +495,18 @@
   outline: 4px dashed #b91010 !important;
   outline-offset: -2px !important;
 }
+
+.pbx-myPrimarySelect {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-color: #fff;
+  border: 1px solid #c4c4c4;
+  border-radius: 6px;
+  padding: 10px 40px 10px 15px;
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.3s ease;
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+}

package/src/index.ts

@@ -15,11 +15,14 @@ export type { PageBuilderUser, ComponentObject, ImageObject, PageBuilderConfig }
 export { createPinia } from 'pinia'
 
 // Export CSS (users will need to import this separately)
-import './css/app.css'
+import './css/style.css'
 
 // Export shared store instances for external access
 export { sharedPageBuilderPinia, sharedPageBuilderStore } from './stores/shared-store'
 
 // export { PageBuilderService } from './src/services/PageBuilderService.ts'
 
-export { initPageBuilder, getPageBuilder } from './composables/builderInstance'
+export { getPageBuilder } from './composables/builderInstance'
+
+// Export the plugin for app.use()
+export { pageBuilder } from './plugin'

package/src/main.ts

@@ -1,15 +1,14 @@
 import './css/dev-global.css'
-import './css/app.css'
-import { initPageBuilder } from './composables/builderInstance'
+import './css/style.css'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
-
-initPageBuilder()
+import { pageBuilder } from './plugin'
 
 const app = createApp(App)
 
 app.use(createPinia())
+app.use(pageBuilder)
 
 app.mount('#app')

package/src/plugin.ts

@@ -0,0 +1,16 @@
+// src/plugin.ts
+import type { App } from 'vue';
+import { PageBuilderService } from './services/PageBuilderService';
+import { sharedPageBuilderStore } from './stores/shared-store';
+import { setBuilderInstance } from './composables/builderInstance';
+
+export const pageBuilder = {
+  install: (app: App): void => {
+    if (!app.config.globalProperties.$pageBuilder) {
+      const pageBuilderStateStore = sharedPageBuilderStore;
+      const instance = new PageBuilderService(pageBuilderStateStore);
+      setBuilderInstance(instance);
+      app.config.globalProperties.$pageBuilder = instance;
+    }
+  },
+};

package/src/services/PageBuilderService.ts

@@ -799,33 +799,10 @@ export class PageBuilderService {
 
   public handleManualSave = async () => {
     this.startEditing()
-    const passedConfig = this.pageBuilderStateStore.getPageBuilderConfig
-
-    // Check if config is set
-    if (passedConfig && passedConfig.userSettings) {
-      //
-      //
-      // Enabled auto save
-      if (
-        (typeof passedConfig.userSettings.autoSave === 'boolean' &&
-          !passedConfig.userSettings.autoSave) ||
-        (typeof passedConfig.userSettings.autoSave === 'boolean' &&
-          passedConfig.userSettings.autoSave)
-      ) {
-        this.pageBuilderStateStore.setIsSaving(true)
-        this.saveDomComponentsToLocalStorage()
-        await delay(400)
-
-        this.pageBuilderStateStore.setIsSaving(false)
-      }
-    }
-    if (passedConfig && !passedConfig.userSettings) {
-      this.pageBuilderStateStore.setIsSaving(true)
-      this.saveDomComponentsToLocalStorage()
-      await delay(400)
-
-      this.pageBuilderStateStore.setIsSaving(false)
-    }
+    this.pageBuilderStateStore.setIsSaving(true)
+    this.saveDomComponentsToLocalStorage()
+    await delay(400)
+    this.pageBuilderStateStore.setIsSaving(false)
   }
 
   public cloneCompObjForDOMInsertion(componentObject: ComponentObject): ComponentObject {

package/src/tests/PageBuilderTest.vue

@@ -84,6 +84,7 @@ const configPageBuilder = {
       default: 'en',
       disable: ['fr', 'es'],
     },
+    autoSave: true,
   },
   settings: {
     brandColor: '#DB93B0',

package/src/utils/builder/html-doc-declaration-with-components.ts

@@ -1,4 +1,4 @@
-import tailwindCSS from '../../css/app.css?inline'
+import tailwindCSS from '../../css/style.css?inline'
 
 const fullHTMLContent = function (HTML: string): string {
   return `<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>${tailwindCSS}</style></head><body>${HTML}</body></html>`