vue-wswg-editor 0.0.1

package/src/components/PageBuilderToolbar/PageBuilderToolbar.vue

@@ -0,0 +1,63 @@
+<template>
+   <!-- Control bar -->
+   <div class="flex divide-x border-b">
+      <slot name="default">
+         <!-- no default toolbar content -->
+      </slot>
+
+      <!-- Desktop / Mobile view toggle -->
+      <div v-if="hasPageSettings" class="ml-auto inline-flex gap-2 px-5 py-2.5">
+         <button
+            class="inline-flex items-center rounded-md border px-3 py-2 text-xs"
+            :class="
+               showPageSettings
+                  ? 'bg-blue-50 text-blue-700 border-blue-800/20'
+                  : 'bg-zinc-50 text-zinc-500 hover:border-zinc-400 hover:text-zinc-900'
+            "
+            title="Page settings"
+            @click="
+               showPageSettings = !showPageSettings;
+               activeBlock = null;
+            "
+         >
+            <Cog6ToothIcon class="size-4" />
+         </button>
+      </div>
+      <div class="inline-flex gap-2 px-5 py-2.5">
+         <button
+            class="inline-flex items-center rounded-md border px-3 py-2 text-xs"
+            :class="
+               editorViewport === 'mobile'
+                  ? 'bg-blue-50 text-blue-700 border-blue-800/20'
+                  : 'bg-zinc-50 text-zinc-500 hover:border-zinc-400 hover:text-zinc-900'
+            "
+            title="Mobile view"
+            @click="editorViewport = 'mobile'"
+         >
+            <DevicePhoneMobileIcon class="size-4" />
+         </button>
+         <button
+            class="inline-flex items-center rounded-md border px-3 py-2 text-xs"
+            :class="
+               editorViewport === 'desktop'
+                  ? 'bg-blue-50 text-blue-700 border-blue-800/20'
+                  : 'bg-zinc-50 text-zinc-500 hover:border-zinc-400 hover:text-zinc-900'
+            "
+            title="Desktop view"
+            @click="editorViewport = 'desktop'"
+         >
+            <ComputerDesktopIcon class="size-4" />
+         </button>
+      </div>
+   </div>
+</template>
+<script setup lang="ts">
+const editorViewport = defineModel<"desktop" | "mobile">("editorViewport");
+const activeBlock = defineModel<any>("activeBlock");
+const showPageSettings = defineModel<boolean>("showPageSettings");
+import { ComputerDesktopIcon, DevicePhoneMobileIcon, Cog6ToothIcon } from "@heroicons/vue/24/outline";
+
+defineProps<{
+   hasPageSettings: boolean;
+}>();
+</script>

package/src/components/PageRenderer/PageRenderer.vue

@@ -0,0 +1,65 @@
+<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>
+</template>
+
+<script setup lang="ts">
+import { type Component } from "vue";
+import { generateNameVariations } from "../../util/helpers";
+import { blockModules } from "./blockModules";
+import type { Block } from "../../types/Block";
+
+defineProps<{
+   blocks: Block[];
+}>();
+
+function getBlock(blockType: string): Component | undefined {
+   // Generate name variations and try to find a match in blockModules keys (file paths)
+   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;
+            }
+         }
+      }
+   }
+
+   return undefined;
+}
+
+// Get the margin class for the block
+// Margin is an object with top and bottom properties
+// margin classses are formatted as `margin-<direction>-<size>`
+function getMarginClass(block: Block): string {
+   const top = block.margin?.top || "none";
+   const bottom = block.margin?.bottom || "none";
+
+   // Map margin sizes to custom class names: none, sm, md, lg, xl
+   const getClass = (size: string, direction: "top" | "bottom"): string => {
+      const normalizedSize = size === "small" ? "sm" : size === "medium" ? "md" : size === "large" ? "lg" : size;
+      return `margin-${direction}-${normalizedSize}`;
+   };
+
+   return [getClass(top, "top"), getClass(bottom, "bottom")].join(" ");
+}
+</script>
+
+<style scoped lang="scss">
+@use "../../assets/styles/mixins" as *;
+
+.block-wrapper {
+   @include block-margin-classes;
+}
+</style>

package/src/components/PageRenderer/blockModules-alternative.ts.example

@@ -0,0 +1,9 @@
+// Alternative 1: Use relative paths instead of aliases
+// This works because the consuming app processes this file
+// The path is relative to where the consuming app's vite.config.ts is located
+// For participant/admin projects, this resolves to ../../page-builder/blocks/**/*.vue
+export const blockModules = import.meta.glob("../../page-builder/blocks/**/*.vue", { eager: true });
+
+// However, this is fragile because it depends on the file location relative to the consuming app
+// Better: Use a build-time script (see Alternative 2)
+

package/src/components/PageRenderer/blockModules-manual.ts.example

@@ -0,0 +1,19 @@
+// Alternative 4: Manual explicit imports
+// Most explicit, but requires updating when adding new blocks
+
+import HeroSection from "../../../../page-builder/blocks/hero-section/hero-section.vue";
+import CardsSection from "../../../../page-builder/blocks/cards-section/cards-section.vue";
+import FaqSection from "../../../../page-builder/blocks/faq-section/faq-section.vue";
+import FlexibleContent from "../../../../page-builder/blocks/flexible-content/flexible-content.vue";
+import TabsSection from "../../../../page-builder/blocks/tabs-section/tabs-section.vue";
+import TextSection from "../../../../page-builder/blocks/text-section/text-section.vue";
+
+export const blockModules = {
+   "hero-section": HeroSection,
+   "cards-section": CardsSection,
+   "faq-section": FaqSection,
+   "flexible-content": FlexibleContent,
+   "tabs-section": TabsSection,
+   "text-section": TextSection,
+};
+

package/src/components/PageRenderer/blockModules-runtime.ts.example

@@ -0,0 +1,23 @@
+// Alternative 3: Runtime registration pattern
+// Components register themselves when imported
+
+import { ref, type Ref } from "vue";
+import type { Component } from "vue";
+
+// Registry store
+export const blockRegistry: Ref<Record<string, Component>> = ref({});
+
+// Registration function
+export function registerBlock(type: string, component: Component) {
+   blockRegistry.value[type] = component;
+}
+
+// In each block component, add:
+// import { registerBlock } from "./blockModules-runtime";
+// registerBlock("hero-section", defineComponent({ ... }));
+
+// Then manually import blocks:
+// import "./blocks/hero-section/hero-section.vue";
+// import "./blocks/cards-section/cards-section.vue";
+// etc.
+

package/src/components/PageRenderer/blockModules.ts

@@ -0,0 +1,3 @@
+// 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 });

package/src/components/PageSettings/PageSettings.vue

@@ -0,0 +1,86 @@
+<template>
+   <div class="page-settings">
+      <div class="flex items-start justify-between border-b bg-white p-5">
+         <div>
+            <button
+               class="cursor-pointer text-sm text-zinc-500 hover:text-zinc-900 hover:underline"
+               @click="emit('close')"
+            >
+               ← Back
+            </button>
+            <h4 class="mt-1 text-lg font-bold">Page settings</h4>
+         </div>
+      </div>
+      <div class="border-b p-5">
+         <!-- Page layout -->
+         <div class="editor-field-node">
+            <!-- Label -->
+            <div class="mb-1.5 flex items-center gap-1.5">
+               <label class="mr-auto font-medium first-letter:uppercase">Page layout</label>
+            </div>
+
+            <select v-model="pageData.settings.layout" class="form-control" @change="getLayoutSettings">
+               <option v-for="layout in availableLayouts" :key="`layout-${layout.__name}`" :value="layout.__name">
+                  {{ layout.label }}
+               </option>
+            </select>
+         </div>
+      </div>
+      <!-- Page settings -->
+      <div class="editor-field-node">
+         <BlockEditorFields
+            v-model="pageData.settings"
+            :fields="pageSettingsFields"
+            :editable="true"
+            :isLayoutBlock="true"
+         />
+      </div>
+   </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeMount, onMounted, ref } from "vue";
+import { getLayoutFields, getLayouts } from "../../util/registry";
+import BlockEditorFields from "../BlockEditorFields/BlockEditorFields.vue";
+
+const emit = defineEmits<{
+   (e: "close"): void;
+}>();
+
+const pageData = defineModel<any>();
+const pageSettingsFields = ref<any>({});
+
+defineProps<{
+   title?: string;
+}>();
+
+const availableLayouts = computed(() => {
+   return getLayouts();
+});
+
+function getLayoutSettings() {
+   if (!pageData.value.settings.layout) return;
+   pageSettingsFields.value = getLayoutFields(pageData.value.settings.layout) || null;
+}
+
+onBeforeMount(() => {
+   if (!pageData.value.settings) {
+      pageData.value.settings = null;
+   }
+});
+
+onMounted(() => {
+   getLayoutSettings();
+});
+</script>
+
+<style scoped lang="scss">
+select.form-control {
+   padding-right: 32px;
+   appearance: none;
+   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); // down chevron
+   background-repeat: no-repeat;
+   background-position: right 8px center;
+   background-size: 20px;
+}
+</style>

package/src/components/ResizeHandle/ResizeHandle.vue

@@ -0,0 +1,105 @@
+<template>
+   <div
+      id="page-builder-resize-handle"
+      ref="resizeHandle"
+      class="resize-handle shrink-0 cursor-col-resize transition-colors duration-200"
+      @mousedown="startResize"
+   ></div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { defineEmits } from "vue";
+
+const emit = defineEmits<{
+   (e: "sidebarWidth", width: number): void;
+}>();
+
+const resizeHandle = ref<HTMLElement | null>(null);
+const sidebarWidth = ref(380); // Default sidebar width (380px)
+const isResizing = ref(false);
+
+// Resize functionality
+function startResize(event: MouseEvent) {
+   isResizing.value = true;
+   event.preventDefault();
+
+   const startX = event.clientX;
+   const startSidebarWidth = sidebarWidth.value;
+
+   function handleMouseMove(event: MouseEvent) {
+      if (!isResizing.value) return;
+
+      const deltaX = event.clientX - startX;
+      const newSidebarWidth = Math.max(300, Math.min(800, startSidebarWidth - deltaX)); // Min 300px, Max 800px
+
+      sidebarWidth.value = newSidebarWidth;
+      emit("sidebarWidth", newSidebarWidth);
+   }
+
+   function handleMouseUp() {
+      isResizing.value = false;
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+   }
+
+   document.addEventListener("mousemove", handleMouseMove);
+   document.addEventListener("mouseup", handleMouseUp);
+   document.body.style.cursor = "col-resize";
+   document.body.style.userSelect = "none";
+}
+</script>
+
+<style scoped lang="scss">
+/* Resize handle styles */
+.resize-handle {
+   position: relative;
+   top: 0;
+   right: 0;
+   z-index: 2;
+   width: 3px;
+   height: 100%;
+   cursor: col-resize;
+   background-color: var(--grey-20);
+   transition: all 0.2s ease-in-out;
+}
+
+.resize-handle:hover {
+   width: 3px;
+   background-color: var(--yellow-40);
+}
+
+.resize-handle:active {
+   width: 3px;
+   background-color: var(--yellow-50);
+}
+
+/* Add a subtle indicator when resizing */
+.resize-handle::before {
+   position: absolute;
+   top: 50%;
+   left: -6px;
+   z-index: 20;
+   width: 14px;
+   height: 40px;
+   content: "";
+   background-color: var(--yellow-40);
+   border-radius: var(--border-radius-16);
+   opacity: 0;
+   transform: translateY(-50%);
+   transition:
+      opacity 0.2s ease-in-out,
+      background-color 0.2s ease-in-out;
+}
+
+.resize-handle:hover::before {
+   opacity: 1;
+}
+
+.resize-handle:active::before {
+   background-color: var(--yellow-50);
+   opacity: 1;
+}
+</style>

package/src/components/WswgJsonEditor/WswgJsonEditor.test.ts

@@ -0,0 +1,43 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import WswgJsonEditor from "./WswgJsonEditor.vue";
+
+describe("WswgJsonEditor", () => {
+   it("renders the placeholder component", () => {
+      const wrapper = mount(WswgJsonEditor);
+
+      expect(wrapper.text()).toContain("WswgJsonEditor");
+      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, {
+         slots: {
+            header: headerContent,
+         },
+      });
+
+      expect(wrapper.text()).toContain(headerContent);
+   });
+
+   it("renders header slot with HTML content", () => {
+      const wrapper = mount(WswgJsonEditor, {
+         slots: {
+            header: "<div class='custom-header'>Header Title</div>",
+         },
+      });
+
+      expect(wrapper.find(".custom-header").exists()).toBe(true);
+      expect(wrapper.text()).toContain("Header Title");
+   });
+
+   it("does not render header slot when not provided", () => {
+      const wrapper = mount(WswgJsonEditor);
+
+      // The component should still render without the header slot
+      expect(wrapper.text()).toContain("WswgJsonEditor");
+      // Header slot should be empty/not present
+      expect(wrapper.html()).not.toContain("custom-header");
+   });
+});