vue-wswg-editor 0.0.9 → 0.0.11

package/src/components/PageRenderer/PageRenderer.vue

@@ -1,44 +1,89 @@
 <template>
-   <div id="page-blocks-wrapper">
-      <div v-for="block in blocks" :key="block.id" class="block-wrapper" :class="{ [getMarginClass(block)]: true }">
-         <component :is="getBlock(block.type)" v-bind="block" :key="`block-${block.id}`" />
-      </div>
+   <div id="page-viewport" class="page-renderer-wrapper relative">
+      <template v-if="isReady">
+         <component :is="layoutComponent" v-if="withLayout && layoutComponent" v-bind="settings">
+            <template #default>
+               <div id="page-blocks-wrapper">
+                  <div
+                     v-for="block in blocks"
+                     :key="block.id"
+                     class="block-wrapper"
+                     :class="{ [getMarginClass(block)]: true }"
+                  >
+                     <component :is="getBlock(block.type)" v-bind="block" :key="`block-${block.id}`" />
+                  </div>
+               </div>
+            </template>
+         </component>
+         <div v-else id="page-blocks-wrapper">
+            <div
+               v-for="block in blocks"
+               :key="block.id"
+               class="block-wrapper"
+               :class="{ [getMarginClass(block)]: true }"
+            >
+               <component :is="getBlock(block.type)" v-bind="block" :key="`block-${block.id}`" />
+            </div>
+            <pre>{{ blocks }}</pre>
+         </div>
+      </template>
    </div>
 </template>
 
 <script setup lang="ts">
-import { type Component } from "vue";
+import { type Component, computed, withDefaults, onBeforeMount, ref } from "vue";
 import { generateNameVariations } from "../../util/helpers";
-import { blockModules } from "./blockModules";
+import { getBlockModule, loadBlockModules } from "./blockModules";
+import { loadLayoutModules, getLayoutModule } from "./layoutModules";
 import type { Block } from "../../types/Block";
 
-defineProps<{
-   blocks: Block[];
-}>();
+const props = withDefaults(
+   defineProps<{
+      blocks: Block[];
+      layout?: string;
+      settings?: Record<string, any>;
+      withLayout?: boolean;
+   }>(),
+   {
+      layout: "default",
+      settings: () => ({}),
+      withLayout: false,
+   }
+);
+
+const isReady = ref(false);
 
 function getBlock(blockType: string): Component | undefined {
-   // Generate name variations and try to find a match in blockModules keys (file paths)
+   // Generate name variations and try to find a match
    const nameVariations = generateNameVariations(blockType);
 
-   // Iterate through all blockModules entries
-   for (const [filePath, module] of Object.entries(blockModules)) {
-      // Check if any variation matches the file path
-      for (const variation of nameVariations) {
-         // Check if the file path contains the variation followed by .vue
-         // e.g., "hero-section" matches "blocks/hero-section/hero-section.vue"
-         if (filePath.includes(`${variation}.vue`)) {
-            // Extract the default export (the Vue component)
-            const component = (module as any).default;
-            if (component) {
-               return component;
-            }
-         }
-      }
+   // Try each variation to find the block component
+   for (const variation of nameVariations) {
+      const module = getBlockModule(variation);
+      if (module) return module;
+   }
+
+   return undefined;
+}
+
+function getLayout(layoutName: string): Component | undefined {
+   // Generate name variations and try to find a match in layoutModules keys (file paths)
+   const nameVariations = generateNameVariations(layoutName);
+
+   // Try each variation to find the block component
+   for (const variation of nameVariations) {
+      const module = getLayoutModule(variation);
+      if (module) return module;
    }
 
    return undefined;
 }
 
+// Get the layout component based on the layout prop
+const layoutComponent = computed(() => {
+   return getLayout(props.layout);
+});
+
 // Get the margin class for the block
 // Margin is an object with top and bottom properties
 // margin classses are formatted as `margin-<direction>-<size>`
@@ -54,6 +99,13 @@ function getMarginClass(block: Block): string {
 
    return [getClass(top, "top"), getClass(bottom, "bottom")].join(" ");
 }
+
+onBeforeMount(async () => {
+   isReady.value = false;
+   await loadBlockModules();
+   await loadLayoutModules();
+   isReady.value = true;
+});
 </script>
 
 <style scoped lang="scss">

package/src/components/PageRenderer/blockModules.ts

@@ -1,3 +1,32 @@
-// import.meta.glob must be at top level - it will be transformed by Vite plugin
-// This file is separate from the Vue component to ensure the transform hook can intercept it
-export const blockModules = import.meta.glob("@page-builder/blocks/**/*.vue", { eager: true });
+// Import from virtual module created by vue-wswg-editor vite plugin
+// Use lazy initialization to avoid circular dependency issues with createField
+// The import is deferred until first access, ensuring createField is available when blocks load
+import { type Component } from "vue";
+import { getModuleDefault } from "../../util/registry";
+import { markRaw } from "vue";
+let _blockModules: Record<string, Component> | null = null;
+
+export async function loadBlockModules(): Promise<Record<string, Component> | null> {
+   if (!_blockModules) {
+      _blockModules = {};
+      // Lazy load virtual modules to prevent initialization order issues
+      const { modules: discoveredModules } = await import("vue-wswg-editor:blocks");
+      for (const [, module] of Object.entries(discoveredModules)) {
+         let resolvedModule = module;
+         // If module is a function (lazy-loaded), call it to get the actual module
+         if (typeof module === "function") {
+            resolvedModule = await module();
+         }
+         const component = getModuleDefault(resolvedModule);
+         if (component && component.__name) {
+            const blockType = component.type || component.__name;
+            _blockModules[blockType] = markRaw(component);
+         }
+      }
+   }
+   return _blockModules;
+}
+
+export function getBlockModule(type: string): Component | undefined {
+   return _blockModules?.[type];
+}

package/src/components/PageRenderer/layoutModules.ts

@@ -0,0 +1,32 @@
+// Import from virtual module created by vue-wswg-editor vite plugin
+// Use lazy initialization to avoid circular dependency issues with createField
+// The import is deferred until first access, ensuring createField is available when blocks load
+import { type Component } from "vue";
+import { getModuleDefault } from "../../util/registry";
+import { markRaw } from "vue";
+let _layoutModules: Record<string, Component> | null = null;
+
+export async function loadLayoutModules(): Promise<Record<string, Component> | null> {
+   if (!_layoutModules) {
+      _layoutModules = {};
+      // Lazy load virtual modules to prevent initialization order issues
+      const { modules: discoveredModules } = await import("vue-wswg-editor:layouts");
+      for (const [, module] of Object.entries(discoveredModules)) {
+         let resolvedModule = module;
+         // If module is a function (lazy-loaded), call it to get the actual module
+         if (typeof module === "function") {
+            resolvedModule = await module();
+         }
+         const component = getModuleDefault(resolvedModule);
+         if (component && component.__name) {
+            const layoutType = component.type || component.__name;
+            _layoutModules[layoutType] = markRaw(component);
+         }
+      }
+   }
+   return _layoutModules;
+}
+
+export function getLayoutModule(type: string): Component | undefined {
+   return _layoutModules?.[type];
+}

package/src/components/PageSettings/PageSettings.vue

@@ -1,6 +1,6 @@
 <template>
    <div class="page-settings">
-      <div class="flex items-start justify-between border-b bg-white p-5">
+      <div class="flex items-start justify-between border-b border-gray-300 bg-white p-5">
          <div>
             <button
                class="cursor-pointer text-sm text-zinc-500 hover:text-zinc-900 hover:underline"
@@ -11,7 +11,7 @@
             <h4 class="mt-1 text-lg font-bold">Page settings</h4>
          </div>
       </div>
-      <div class="border-b p-5">
+      <div class="border-b border-gray-300 p-5">
          <!-- Page layout -->
          <div class="editor-field-node">
             <!-- Label -->
@@ -19,7 +19,11 @@
                <label class="mr-auto font-medium first-letter:uppercase">Page layout</label>
             </div>
 
-            <select v-model="pageData.settings.layout" class="form-control" @change="getLayoutSettings">
+            <select
+               v-model="pageData[settingsKey].layout"
+               class="form-control w-full rounded-md border border-gray-300 p-2"
+               @change="getLayoutSettings"
+            >
                <option v-for="layout in availableLayouts" :key="`layout-${layout.__name}`" :value="layout.__name">
                   {{ layout.label }}
                </option>
@@ -29,7 +33,7 @@
       <!-- Page settings -->
       <div class="editor-field-node">
          <BlockEditorFields
-            v-model="pageData.settings"
+            v-model="pageData[settingsKey]"
             :fields="pageSettingsFields"
             :editable="true"
             :isLayoutBlock="true"
@@ -50,21 +54,25 @@ const emit = defineEmits<{
 const pageData = defineModel<any>();
 const pageSettingsFields = ref<any>({});
 
-defineProps<{
-   title?: string;
-}>();
-
+const props = withDefaults(
+   defineProps<{
+      settingsKey?: string;
+   }>(),
+   {
+      settingsKey: "settings",
+   }
+);
 const availableLayouts = computed(() => {
    return getLayouts();
 });
 
 function getLayoutSettings() {
-   if (!pageData.value.settings.layout) return;
-   pageSettingsFields.value = getLayoutFields(pageData.value.settings.layout) || null;
+   if (!pageData.value[props.settingsKey].layout) return;
+   pageSettingsFields.value = getLayoutFields(pageData.value[props.settingsKey].layout) || null;
 }
 
 onBeforeMount(() => {
-   if (!pageData.value.settings) {
+   if (!pageData.value[props.settingsKey]) {
       pageData.value.settings = null;
    }
 });

package/src/components/ResizeHandle/ResizeHandle.vue

@@ -55,25 +55,25 @@ function startResize(event: MouseEvent) {
 <style scoped lang="scss">
 /* Resize handle styles */
 .resize-handle {
-   position: relative;
+   position: sticky;
    top: 0;
    right: 0;
-   z-index: 2;
+   z-index: 14;
    width: 3px;
-   height: 100%;
+   height: var(--editor-height);
    cursor: col-resize;
-   background-color: var(--grey-20);
+   background-color: #dbdee0;
    transition: all 0.2s ease-in-out;
 }
 
 .resize-handle:hover {
    width: 3px;
-   background-color: var(--yellow-40);
+   background-color: #fcd34d;
 }
 
 .resize-handle:active {
    width: 3px;
-   background-color: var(--yellow-50);
+   background-color: #fbbf24;
 }
 
 /* Add a subtle indicator when resizing */
@@ -81,12 +81,12 @@ function startResize(event: MouseEvent) {
    position: absolute;
    top: 50%;
    left: -6px;
-   z-index: 20;
+   z-index: 50;
    width: 14px;
    height: 40px;
    content: "";
-   background-color: var(--yellow-40);
-   border-radius: var(--border-radius-16);
+   background-color: #fcd34d;
+   border-radius: 8px;
    opacity: 0;
    transform: translateY(-50%);
    transition:
@@ -99,7 +99,7 @@ function startResize(event: MouseEvent) {
 }
 
 .resize-handle:active::before {
-   background-color: var(--yellow-50);
+   background-color: #fbbf24;
    opacity: 1;
 }
 </style>