vue-wswg-editor 0.0.12 → 0.0.14

package/src/components/PageBuilderSidebar/PageBuilderSidebar.vue

@@ -14,6 +14,7 @@
          v-model="pageData"
          :editable="editable"
          :settingsKey="settingsKey"
+         :activeTab="activeSettingsTab"
          @close="showPageSettings = false"
       />
       <!-- Active section-->
@@ -90,9 +91,8 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
-import { pageBuilderBlocks } from "../../util/registry";
+import { getBlock } from "../../util/theme-registry";
 import type { Block } from "../../types/Block";
-import { toCamelCase } from "../../util/helpers";
 import BlockBrowser from "../BlockBrowser/BlockBrowser.vue";
 import BlockEditorFields from "../BlockEditorFields/BlockEditorFields.vue";
 import PageBlockList from "../PageBlockList/PageBlockList.vue";
@@ -114,12 +114,14 @@ const props = withDefaults(
       blocksKey?: string;
       settingsKey?: string;
       hasPageSettings?: boolean;
+      activeSettingsTab?: string;
    }>(),
    {
       editable: true,
       blocksKey: "blocks",
       settingsKey: "settings",
       hasPageSettings: false,
+      activeSettingsTab: undefined,
    }
 );
 
@@ -136,7 +138,7 @@ const computedActiveBlock = computed(() => {
    }
 
    // Find the corresponding block in the registry
-   const registryBlock = pageBuilderBlocks.value[toCamelCase(blockType)];
+   const registryBlock = getBlock(blockType);
 
    if (!registryBlock) {
       // If no registry block found, return activeBlock as-is

package/src/components/PageRenderer/PageRenderer.vue

@@ -1,7 +1,7 @@
 <template>
    <div id="page-viewport" class="page-renderer-wrapper relative">
       <template v-if="isReady">
-         <component :is="layoutComponent" v-if="withLayout && layoutComponent" v-bind="settings">
+         <component :is="layoutComponent" v-if="withLayout && layoutComponent" v-bind="settings" :blocks="blocks">
             <template #default>
                <div id="page-blocks-wrapper">
                   <div
@@ -24,18 +24,15 @@
             >
                <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, computed, withDefaults, onBeforeMount, ref } from "vue";
-import { generateNameVariations } from "../../util/helpers";
-import { getBlockModule, loadBlockModules } from "./blockModules";
-import { loadLayoutModules, getLayoutModule } from "./layoutModules";
+import { computed, withDefaults, onBeforeMount, ref } from "vue";
 import type { Block } from "../../types/Block";
+import { initialiseRegistry, getBlock, getLayout } from "../../util/theme-registry";
 
 const props = withDefaults(
    defineProps<{
@@ -43,45 +40,21 @@ const props = withDefaults(
       layout?: string;
       settings?: Record<string, any>;
       withLayout?: boolean;
+      theme?: string;
    }>(),
    {
       layout: "default",
       settings: () => ({}),
       withLayout: false,
+      theme: "default",
    }
 );
 
 const isReady = ref(false);
 
-function getBlock(blockType: string): Component | undefined {
-   // Generate name variations and try to find a match
-   const nameVariations = generateNameVariations(blockType);
-
-   // 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);
+   return getLayout(props.layout || props.settings?.layout);
 });
 
 // Get the margin class for the block
@@ -102,16 +75,23 @@ function getMarginClass(block: Block): string {
 
 onBeforeMount(async () => {
    isReady.value = false;
-   await loadBlockModules();
-   await loadLayoutModules();
+
+   // Initialise registries for editor preview
+   // Exclude the editing registry to load only the theme and blocks
+   await initialiseRegistry(props.theme, false);
+
    isReady.value = true;
 });
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 @use "../../assets/styles/mixins" as *;
 
-.block-wrapper {
-   @include block-margin-classes;
+// Styles are scoped to the component using the root class selector instead of Vue's scoped attribute
+// This ensures styles work correctly when the component is consumed from a library
+.page-renderer-wrapper {
+   .block-wrapper {
+      @include block-margin-classes;
+   }
 }
 </style>

package/src/components/PageSettings/PageSettings.vue

@@ -11,7 +11,7 @@
             <h4 class="mt-1 text-lg font-bold">Page settings</h4>
          </div>
       </div>
-      <div class="border-b border-gray-300 p-5">
+      <div v-if="availableLayouts.length > 1" class="border-b border-gray-300 p-5">
          <!-- Page layout -->
          <div class="editor-field-node">
             <!-- Label -->
@@ -37,6 +37,7 @@
             :fields="pageSettingsFields"
             :editable="true"
             :isLayoutBlock="true"
+            :activeTab="activeTab"
          />
       </div>
    </div>
@@ -44,7 +45,7 @@
 
 <script setup lang="ts">
 import { computed, onBeforeMount, onMounted, ref } from "vue";
-import { getLayoutFields, getLayouts } from "../../util/registry";
+import { themeLayouts } from "../../util/theme-registry";
 import BlockEditorFields from "../BlockEditorFields/BlockEditorFields.vue";
 
 const emit = defineEmits<{
@@ -57,23 +58,26 @@ const pageSettingsFields = ref<any>({});
 const props = withDefaults(
    defineProps<{
       settingsKey?: string;
+      activeTab?: string;
    }>(),
    {
       settingsKey: "settings",
+      activeTab: undefined,
    }
 );
 const availableLayouts = computed(() => {
-   return getLayouts();
+   return Object.values(themeLayouts.value) || [];
 });
 
 function getLayoutSettings() {
-   if (!pageData.value[props.settingsKey].layout) return;
-   pageSettingsFields.value = getLayoutFields(pageData.value[props.settingsKey].layout) || null;
+   const activeLayout = pageData.value[props.settingsKey].layout;
+   if (!activeLayout) return;
+   pageSettingsFields.value = themeLayouts.value[activeLayout]?.fields || null;
 }
 
 onBeforeMount(() => {
    if (!pageData.value[props.settingsKey]) {
-      pageData.value.settings = null;
+      pageData.value[props.settingsKey] = {};
    }
 });
 

package/src/components/ResizeHandle/ResizeHandle.vue

@@ -1,15 +1,23 @@
 <template>
-   <div
-      id="page-builder-resize-handle"
-      ref="resizeHandle"
-      class="resize-handle shrink-0 cursor-col-resize transition-colors duration-200"
-      @mousedown="startResize"
-   ></div>
+   <div class="resize-handle-wrapper group">
+      <div
+         id="page-builder-resize-handle"
+         ref="resizeHandle"
+         class="resize-handle shrink-0 cursor-col-resize transition-colors duration-200"
+         @mousedown="startResize"
+      ></div>
+      <span
+         class="viewport-size absolute right-1 top-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+      >
+         <div class="rounded-sm bg-yellow-400 px-1.5 py-1 font-mono text-xs font-medium text-gray-900">
+            {{ computedViewportSize }}
+         </div>
+      </span>
+   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import { defineEmits } from "vue";
+import { ref, computed, onMounted, onBeforeUnmount } from "vue";
 
 const emit = defineEmits<{
    (e: "sidebarWidth", width: number): void;
@@ -18,6 +26,9 @@ const emit = defineEmits<{
 const resizeHandle = ref<HTMLElement | null>(null);
 const sidebarWidth = ref(380); // Default sidebar width (380px)
 const isResizing = ref(false);
+const viewportWidth = ref<number>(0);
+let resizeObserver: ResizeObserver | null = null;
+let updateViewportWidthFn: (() => void) | null = null;
 
 // Resize functionality
 function startResize(event: MouseEvent) {
@@ -50,15 +61,62 @@ function startResize(event: MouseEvent) {
    document.body.style.cursor = "col-resize";
    document.body.style.userSelect = "none";
 }
+
+// Calculate viewport width based on #page-viewport element
+const computedViewportSize = computed(() => {
+   return viewportWidth.value > 0 ? `${viewportWidth.value}px` : "0px";
+});
+
+// Setup ResizeObserver to watch #page-viewport element
+onMounted(() => {
+   updateViewportWidthFn = () => {
+      const viewportElement = document.getElementById("page-preview-container");
+      if (viewportElement) {
+         viewportWidth.value = viewportElement.offsetWidth;
+      }
+   };
+
+   // Initial measurement
+   updateViewportWidthFn();
+
+   // Use ResizeObserver to watch for size changes
+   const viewportElement = document.getElementById("page-preview-container");
+   if (viewportElement) {
+      resizeObserver = new ResizeObserver(() => {
+         if (updateViewportWidthFn) {
+            updateViewportWidthFn();
+         }
+      });
+      resizeObserver.observe(viewportElement);
+   }
+
+   // Also listen for window resize events as a fallback
+   window.addEventListener("resize", updateViewportWidthFn);
+});
+
+onBeforeUnmount(() => {
+   if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+   }
+   if (updateViewportWidthFn) {
+      window.removeEventListener("resize", updateViewportWidthFn);
+      updateViewportWidthFn = null;
+   }
+});
 </script>
 
 <style scoped lang="scss">
 /* Resize handle styles */
-.resize-handle {
+.resize-handle-wrapper {
    position: sticky;
    top: 0;
    right: 0;
-   z-index: 14;
+   z-index: 30;
+   height: var(--editor-height);
+}
+
+.resize-handle {
    width: 3px;
    height: var(--editor-height);
    cursor: col-resize;

package/src/components/{WswgJsonEditor/WswgJsonEditor.test.ts → WswgPageBuilder/WswgPageBuilder.test.ts}

@@ -1,18 +1,18 @@
 import { describe, it, expect } from "vitest";
 import { mount } from "@vue/test-utils";
-import WswgJsonEditor from "./WswgJsonEditor.vue";
+import WswgPageBuilder from "./WswgPageBuilder.vue";
 
-describe("WswgJsonEditor", () => {
+describe("WswgPageBuilder", () => {
    it("renders the placeholder component", () => {
-      const wrapper = mount(WswgJsonEditor);
+      const wrapper = mount(WswgPageBuilder);
 
-      expect(wrapper.text()).toContain("WswgJsonEditor");
+      expect(wrapper.text()).toContain("WswgPageBuilder");
       expect(wrapper.text()).toContain("This is a placeholder component");
    });
 
    it("renders header slot content when provided", () => {
       const headerContent = "Custom Header Content";
-      const wrapper = mount(WswgJsonEditor, {
+      const wrapper = mount(WswgPageBuilder, {
          slots: {
             header: headerContent,
          },
@@ -22,7 +22,7 @@ describe("WswgJsonEditor", () => {
    });
 
    it("renders header slot with HTML content", () => {
-      const wrapper = mount(WswgJsonEditor, {
+      const wrapper = mount(WswgPageBuilder, {
          slots: {
             header: "<div class='custom-header'>Header Title</div>",
          },
@@ -33,10 +33,10 @@ describe("WswgJsonEditor", () => {
    });
 
    it("does not render header slot when not provided", () => {
-      const wrapper = mount(WswgJsonEditor);
+      const wrapper = mount(WswgPageBuilder);
 
       // The component should still render without the header slot
-      expect(wrapper.text()).toContain("WswgJsonEditor");
+      expect(wrapper.text()).toContain("WswgPageBuilder");
       // Header slot should be empty/not present
       expect(wrapper.html()).not.toContain("custom-header");
    });