vue-wswg-editor 0.0.1

package/src/components/WswgJsonEditor/WswgJsonEditor.vue

@@ -0,0 +1,391 @@
+<template>
+   <div class="wswg-json-editor">
+      <div class="wswg-json-editor-header">
+         <!-- header slot for custom control elements -->
+         <slot name="header">
+            <!-- no default header content -->
+         </slot>
+         <!-- wswg toolbar-->
+         <PageBuilderToolbar
+            v-model:editorViewport="editorViewport"
+            v-model:showPageSettings="showPageSettings"
+            v-model:activeBlock="activeBlock"
+            :hasPageSettings="hasPageSettings"
+         >
+            <slot name="toolbar">
+               <!-- no default toolbar content -->
+            </slot>
+         </PageBuilderToolbar>
+      </div>
+      <slot v-if="loading" name="loading">
+         <div class="wswg-json-editor-loading">
+            <span>Loading...</span>
+         </div>
+      </slot>
+      <!-- WYSIWYG editor -->
+      <div v-else class="wswg-json-editor-canvas">
+         <!-- Page preview -->
+         <div class="wswg-json-editor-canvas-preview">
+            <div
+               class="mx-auto h-full overflow-hidden rounded-lg bg-white transition-all duration-300"
+               :class="{ 'w-full': editorViewport === 'desktop', 'w-96': editorViewport === 'mobile' }"
+            >
+               <BrowserNavigation v-if="showBrowserBar" :url="url" />
+               <div v-if="pageLayout" id="page-preview-viewport" class="h-full overflow-y-auto">
+                  <component :is="pageLayout">
+                     <template #default>
+                        <!-- No blocks found -->
+                        <EmptyState
+                           v-if="!pageData[blocksKey]?.length"
+                           v-model:showAddBlockMenu="showAddBlockMenu"
+                           :editable="editable"
+                           @block-added="handleAddBlock"
+                        />
+                        <!-- Blocks found -->
+                        <div v-else id="page-blocks-wrapper">
+                           <div v-for="(block, blockIndex) in pageData[blocksKey]" :key="block.id">
+                              <BlockComponent
+                                 :block="block"
+                                 :blockIndex="blockIndex"
+                                 :activeBlock="activeBlock"
+                                 :editable="editable"
+                                 :hoveredBlockId="hoveredBlockId"
+                                 @hover-block="setHoveredBlockId"
+                                 @click-block="handleBlockClick"
+                              />
+                           </div>
+                        </div>
+                     </template>
+                  </component>
+               </div>
+               <p v-else>No layout component found</p>
+            </div>
+         </div>
+
+         <!-- Resizable divider -->
+         <ResizeHandle @sidebar-width="handleSidebarWidth" />
+
+         <!-- Sidebar -->
+         <PageBuilderSidebar
+            v-model="pageData"
+            v-model:activeBlock="activeBlock"
+            v-model:hoveredBlockId="hoveredBlockId"
+            v-model:showPageSettings="showPageSettings"
+            v-model:showAddBlockMenu="showAddBlockMenu"
+            :editable="editable"
+            :blocksKey="blocksKey"
+            :settingsKey="settingsKey"
+            :style="{ width: sidebarWidth + 'px' }"
+         />
+      </div>
+   </div>
+</template>
+
+<script setup lang="ts">
+import { ref, shallowRef, withDefaults, watch, type Component, onBeforeMount, nextTick, computed } from "vue";
+import PageBuilderToolbar from "../PageBuilderToolbar/PageBuilderToolbar.vue";
+import ResizeHandle from "../ResizeHandle/ResizeHandle.vue";
+import PageBuilderSidebar from "../PageBuilderSidebar/PageBuilderSidebar.vue";
+import BrowserNavigation from "../BrowserNavigation/BrowserNavigation.vue";
+import BlockComponent from "../BlockComponent/BlockComponent.vue";
+import EmptyState from "../EmptyState/EmptyState.vue";
+import { getBlockComponent, getLayouts } from "../../util/registry";
+import type { Block } from "../../types/Block";
+import Sortable from "sortablejs";
+
+const props = withDefaults(
+   defineProps<{
+      editable?: boolean;
+      loading?: boolean;
+      url?: string;
+      showBrowserBar?: boolean;
+      blocksKey?: string;
+      settingsKey?: string;
+      defaultBlockMargin?: "none" | "small" | "medium" | "large";
+   }>(),
+   {
+      editable: false,
+      loading: false,
+      url: "",
+      showBrowserBar: false,
+      blocksKey: "blocks",
+      settingsKey: "settings",
+      defaultBlockMargin: "none",
+   }
+);
+
+const editorViewport = ref<"desktop" | "mobile">("desktop");
+const showPageSettings = ref(false);
+const showAddBlockMenu = ref(false);
+const activeBlock = ref<any>(null);
+const isSorting = ref(false);
+const hoveredBlockId = ref<string | null>(null);
+const sidebarWidth = ref(380); // Default sidebar width (380px)
+
+// Model value for the JSON page data
+const pageData = defineModel<any>();
+
+// Layout component - dynamically imported from page-builder directory
+// Using shallowRef to avoid making the component reactive (performance optimization)
+const pageLayout = shallowRef<Component | undefined>(undefined);
+
+// Apply the sidebar width from the resize handle
+function handleSidebarWidth(width: number) {
+   sidebarWidth.value = width;
+}
+
+// Load layout component dynamically from @page-builder/layout/
+async function loadLayout(layoutName: string | undefined) {
+   // Use "default" layout if no layout is provided
+   const layout = layoutName || "default";
+
+   try {
+      // Try to import the layout from @page-builder/layout/
+      // This alias is configured in the consuming app (admin)
+      const layoutModule = await import(`@page-builder/layout/${layout}.vue`);
+      pageLayout.value = layoutModule.default;
+      await nextTick();
+      initSortable();
+   } catch (error) {
+      // Layout doesn't exist, return undefined
+      console.warn(`Layout "${layout}" not found in @page-builder/layout/`, error);
+      pageLayout.value = undefined;
+   }
+}
+
+// Check if the page has settings
+const hasPageSettings = computed(() => {
+   // Show page settings if there are multiple layouts to choose from
+   const layouts = getLayouts();
+   if (Object.keys(layouts).length > 1) {
+      return true;
+   }
+
+   // If the layout has settings
+   if (pageData.value?.[props.settingsKey]) {
+      if (Object.keys(pageData.value?.[props.settingsKey]).length > 0) {
+         return true;
+      }
+   }
+
+   return false;
+});
+
+function handleBlockClick(block: Block | null) {
+   activeBlock.value = block;
+   showPageSettings.value = false;
+   hoveredBlockId.value = null;
+   showAddBlockMenu.value = false;
+}
+
+function handleAddBlock(blockType: string, insertIndex?: number) {
+   // Ensure blocks array exists
+   if (!pageData.value[props.blocksKey]) {
+      pageData.value[props.blocksKey] = [];
+   }
+
+   // Record if this is an add from the EmptyState
+   const isAddFromEmptyState = insertIndex === undefined;
+
+   // Create a new block object
+   const newBlock = {
+      id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+      type: blockType,
+      margin: props.defaultBlockMargin
+         ? { top: props.defaultBlockMargin, bottom: props.defaultBlockMargin }
+         : undefined,
+   };
+   // Get the default prop values from the block component
+   const blockComponent = getBlockComponent(blockType);
+   if (blockComponent?.props) {
+      // loop props and set their default value
+      Object.entries(blockComponent.props).forEach(([key, value]: [string, any]) => {
+         if (value.default) {
+            if (typeof value.default === "function") {
+               newBlock[key as keyof typeof newBlock] = value.default();
+            } else {
+               newBlock[key as keyof typeof newBlock] = value.default;
+            }
+         }
+      });
+   }
+
+   // Add the new block at the specified index or at the end
+   if (insertIndex !== undefined) {
+      pageData.value[props.blocksKey].splice(insertIndex, 0, newBlock);
+   } else {
+      pageData.value[props.blocksKey].push(newBlock);
+      // Set the new block as active only when adding to the end (from EmptyState)
+      activeBlock.value = newBlock;
+      showAddBlockMenu.value = false;
+   }
+
+   // finally, if this is an add from the EmptyState, we need to trigger a re-render and initialise the sortable
+   if (isAddFromEmptyState) {
+      nextTick(() => {
+         // The component will re-render with the new block data
+         initSortable();
+      });
+   }
+
+   return newBlock;
+}
+
+function setHoveredBlockId(id: string | null) {
+   if (isSorting.value) return;
+   hoveredBlockId.value = id;
+}
+
+// Watch for changes in pageData layout and load the corresponding component
+watch(
+   () => pageData.value?.[props.settingsKey]?.layout,
+   (layoutName) => {
+      loadLayout(layoutName);
+   },
+   { immediate: true }
+);
+
+// Watch for activeBlock changes and scroll to the corresponding block in the preview
+watch(
+   () => activeBlock.value?.id,
+   async (blockId) => {
+      if (!blockId) return;
+
+      // Wait for DOM to update
+      await nextTick();
+
+      // Find the block element by data-block-id
+      const blockElement = document.querySelector(`[data-block-id="${blockId}"]`) as HTMLElement;
+      if (!blockElement) return;
+
+      // Scroll the block into view, centered in the scrollable container
+      blockElement.scrollIntoView({
+         behavior: "smooth",
+         block: "center",
+         inline: "nearest",
+      });
+   }
+);
+
+function initSortable() {
+   const sortableBlocksWrapper = document.getElementById("page-blocks-wrapper");
+   if (!sortableBlocksWrapper) return;
+   new Sortable(sortableBlocksWrapper, {
+      animation: 150,
+      ghostClass: "sortable-ghost",
+      chosenClass: "sortable-chosen",
+      dragClass: "sortable-drag",
+      group: "page-blocks",
+      onStart: () => {
+         isSorting.value = true;
+      },
+      onAdd: (event: any) => {
+         // This fires when an item is added from another list (drag from sidebar)
+         const { item: draggedElement, newIndex } = event;
+         const blockType = draggedElement.getAttribute("data-block-type");
+
+         if (blockType) {
+            // Use the consolidated handleAddBlock function
+            handleAddBlock(blockType, newIndex);
+
+            // Remove the cloned HTML element that SortableJS added
+            draggedElement.remove();
+
+            // Force Vue to re-render by triggering reactivity
+            nextTick(() => {
+               // The component will re-render with the new block data
+            });
+         }
+      },
+      onEnd: (event: any) => {
+         isSorting.value = false;
+         const { oldIndex, newIndex } = event;
+
+         // Only handle reordering if this wasn't an add operation (oldIndex will be null for adds)
+         if (oldIndex !== null && oldIndex !== newIndex) {
+            const movedBlock = pageData.value?.[props.blocksKey]?.splice(oldIndex, 1)[0];
+            pageData.value?.[props.blocksKey]?.splice(newIndex, 0, movedBlock);
+         }
+      },
+   });
+}
+
+onBeforeMount(() => {
+   if (!pageData.value?.[props.settingsKey]) {
+      if (pageData.value) {
+         pageData.value[props.settingsKey] = {};
+      }
+   }
+
+   if (!pageData.value?.[props.settingsKey]?.layout) {
+      if (pageData.value && pageData.value[props.settingsKey]) {
+         pageData.value[props.settingsKey].layout = "default";
+      }
+   }
+
+   // Sanitise the layout data (must be a valid layout name string)
+   if (pageData.value?.[props.settingsKey]?.layout) {
+      const layouts = getLayouts();
+      const settings = pageData.value?.[props.settingsKey];
+      if (settings) {
+         if (typeof settings.layout !== "string") {
+            settings.layout = "default";
+         } else if (!layouts[settings.layout]) {
+            settings.layout = "default";
+         }
+      }
+   }
+
+   if (!pageData.value?.[props.blocksKey]) {
+      if (pageData.value) {
+         pageData.value[props.blocksKey] = [];
+      }
+   }
+});
+</script>
+
+<style lang="scss">
+.wswg-json-editor {
+   display: flex;
+   flex-direction: column;
+   width: 100%;
+   max-width: 100%;
+   height: 100vh;
+
+   &-header {
+      position: sticky;
+      top: 0;
+      z-index: 20;
+      background-color: #fff;
+   }
+
+   &-loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+   }
+
+   &-canvas {
+      display: flex;
+      flex: 1;
+      flex-grow: 1;
+      flex-shrink: 0;
+      height: 100%;
+      overflow-y: auto;
+      background-color: #6a6a6a;
+
+      &-preview {
+         flex: 1;
+         flex-grow: 1;
+         flex-shrink: 0;
+         padding: 2rem;
+      }
+
+      &-sidebar {
+         min-width: 300px;
+         padding: 2rem;
+         background: #fff;
+      }
+   }
+}
+</style>

package/src/index.ts

@@ -0,0 +1,15 @@
+// Export field configuration utilities first (before any side effects)
+// This ensures createField is available immediately without waiting for CSS or component imports
+export { createField } from "./util/fieldConfig";
+export type { EditorFieldConfig, ValidatorFunction } from "./util/fieldConfig";
+export { getLayouts } from "./util/registry";
+export { validateField, validateAllFields } from "./util/validation";
+
+// Export components (component exports don't cause side effects until used)
+export { default as WswgJsonEditor } from "./components/WswgJsonEditor/WswgJsonEditor.vue";
+// Export PageRenderer separately - it doesn't use the registry, so it won't trigger field loading
+export { default as PageRenderer } from "./components/PageRenderer/PageRenderer.vue";
+
+// Import CSS - Vite will extract this to dist/style.css during build
+// Consuming apps should import "vue-wswg-editor/style.css"
+import "./style.css";

package/src/shims.d.ts

@@ -0,0 +1,72 @@
+declare module "*.vue" {
+   import type { DefineComponent } from "vue";
+
+   const component: DefineComponent<object, object, any>;
+   export default component;
+}
+
+// Image imports - Vite returns the URL as a string
+declare module "*.jpg" {
+   const src: string;
+   export default src;
+}
+
+declare module "*.jpeg" {
+   const src: string;
+   export default src;
+}
+
+declare module "*.png" {
+   const src: string;
+   export default src;
+}
+
+declare module "*.gif" {
+   const src: string;
+   export default src;
+}
+
+declare module "*.svg" {
+   const src: string;
+   export default src;
+}
+
+declare module "*.webp" {
+   const src: string;
+   export default src;
+}
+
+// Vite import.meta.glob type definitions
+interface ImportMeta {
+   glob<T = any>(
+      pattern: string | string[],
+      options?: {
+         eager?: boolean;
+         import?: string;
+         query?: string | Record<string, string | number | boolean>;
+         exclude?: string | string[];
+         as?: "url" | "raw";
+      }
+   ): Record<string, () => Promise<T>> | Record<string, T> | Record<string, string>;
+}
+
+// SortableJS type declaration - reference @types/sortablejs and re-export as ESM default
+/// <reference types="sortablejs" />
+declare module "sortablejs" {
+   // Reference the Sortable class from @types/sortablejs via triple-slash directive
+   // This allows default import with esModuleInterop
+   const Sortable: {
+      new (element: HTMLElement, options?: any): any;
+      active: any;
+      utils: any;
+      mount(...plugins: any[]): void;
+      create(element: HTMLElement, options?: any): any;
+      dragged: HTMLElement | null;
+      ghost: HTMLElement | null;
+      clone: HTMLElement | null;
+      get(element: HTMLElement): any;
+      readonly version: string;
+   };
+   export = Sortable;
+   export default Sortable;
+}

package/src/style.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/types/Block.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Custom component type with additional block-specific properties
+ * These properties are set via defineOptions() in Vue components
+ */
+export type Block = Component & {
+   __name: string; // The autogenerated name of the block
+   props: Record<string, any>;
+   id: string;
+   type: string;
+   // Defined in template
+   label?: string;
+   icon?: string;
+   // fields file
+   fields?: Record<string, any>;
+   // Auto generated from the component path
+   directory?: string; // Where the block component is located (e.g., "@page-builder/blocks/hero-section")
+   // Margin
+   margin?: { top?: string; bottom?: string };
+};

package/src/types/Layout.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Custom component type with additional layout-specific properties
+ * These properties are set via defineOptions() in Vue components
+ */
+export type Layout = Component & {
+   __name: string; // The autogenerated name of the layout
+   label: string; // The custom name of the layout
+   fields?: Record<string, EditorFieldConfig>;
+};

package/src/util/fieldConfig.ts

@@ -0,0 +1,173 @@
+import type { Component } from "vue";
+
+/**
+ * Validator function that returns:
+ * - `true` if the value is valid
+ * - `false` if the value is invalid (generic error)
+ * - `string` if the value is invalid (specific error message)
+ */
+export type ValidatorFunction = (value: any) => Promise<boolean | string>;
+
+/**
+ * Editor field types for the page builder sidebar
+ */
+export type EditorFieldType =
+   | "text" // ✅
+   | "textarea" // ✅
+   | "number" // ✅
+   | "boolean" // ✅
+   | "email" // ✅
+   | "url" // ✅
+   | "select" // ✅
+   | "checkbox" // ✅
+   | "radio" // ✅
+   | "color" // ✅
+   | "range" // ✅
+   | "repeater" // ✅
+   | "margin" // ✅
+   | "custom"; // 🔌 (image, json, video, richtext, etc)
+
+/**
+ * Simple utility for defining page builder props with editor field metadata
+ * This approach separates Vue props from editor field configuration
+ */
+
+export interface EditorFieldConfig {
+   type: EditorFieldType;
+   component?: Component; // if providing a custom editor field component
+   required?: boolean;
+   default?: any;
+   label?: string;
+   description?: string;
+   placeholder?: string;
+   rows?: number;
+   options?: Array<{ label: string; value: any; id: string }>;
+   step?: number;
+   hidden?: boolean;
+   group?: string;
+   clearable?: boolean;
+   /**
+    * Validator function that returns:
+    * - `true` if the value is valid
+    * - `false` if the value is invalid (generic error)
+    * - `string` if the value is invalid (specific error message)
+    */
+   validator?: ValidatorFunction;
+   // Repeater-specific properties
+   repeaterFields?: Record<string, EditorFieldConfig>;
+   repeaterFieldLabel?: string; // attribute key for the repeater field label
+   // String length validation
+   minLength?: number;
+   maxLength?: number;
+   // Number validation
+   min?: number;
+   max?: number;
+   // Repeater validation
+   minItems?: number;
+   maxItems?: number;
+   // Image specific
+   // Whether the image is responsive eg: xs, sm, md, lg, xl, primary
+   responsive?: boolean;
+}
+
+/**
+ * Helper function to create editor field configurations
+ */
+export const createField = {
+   custom: (config: Partial<EditorFieldConfig> = {}): EditorFieldConfig => ({
+      type: "custom",
+      ...config,
+   }),
+
+   text: (config: Partial<EditorFieldConfig> = {}): EditorFieldConfig => ({
+      type: "text",
+      ...config,
+   }),
+
+   textarea: (config: Partial<EditorFieldConfig> = {}): EditorFieldConfig => ({
+      type: "textarea",
+      ...config,
+   }),
+
+   number: (config: Partial<EditorFieldConfig> = {}): EditorFieldConfig => ({
+      type: "number",
+      ...config,
+   }),
+
+   boolean: (config: Partial<EditorFieldConfig> = {}): EditorFieldConfig => ({
+      type: "boolean",
+      ...config,
+   }),
+
+   email: (config: Partial<EditorFieldConfig> = {}): EditorFieldConfig => ({
+      type: "email",
+      ...config,
+   }),
+
+   url: (config: Partial<EditorFieldConfig> = {}): EditorFieldConfig => ({
+      type: "url",
+      ...config,
+   }),
+
+   select: <T>(
+      options: Array<{ label: string; value: T; id: string }>,
+      config: Partial<Omit<EditorFieldConfig, "options">> = {}
+   ): EditorFieldConfig => ({
+      type: "select",
+      options,
+      ...config,
+   }),
+
+   radio: <T>(
+      options: Array<{ label: string; value: T; id: string }>,
+      config: Partial<Omit<EditorFieldConfig, "options">> = {}
+   ): EditorFieldConfig => ({
+      type: "radio",
+      options,
+      ...config,
+   }),
+
+   checkbox: <T>(
+      options: Array<{ label: string; value: T; id: string }>,
+      config: Partial<Omit<EditorFieldConfig, "options">> = {}
+   ): EditorFieldConfig => ({
+      type: "checkbox",
+      options,
+      ...config,
+   }),
+
+   color: (config: Partial<EditorFieldConfig> = {}): EditorFieldConfig => ({
+      type: "color",
+      ...config,
+   }),
+
+   range: (config: Partial<EditorFieldConfig> = {}): EditorFieldConfig => ({
+      type: "range",
+      ...config,
+   }),
+
+   repeater: (
+      repeaterFields: Record<string, EditorFieldConfig>,
+      config: Partial<EditorFieldConfig> = {}
+   ): EditorFieldConfig => ({
+      type: "repeater",
+      repeaterFields,
+      ...config,
+   }),
+
+   margin: (config: Partial<EditorFieldConfig> = {}): EditorFieldConfig => ({
+      type: "margin",
+      options: [
+         { label: "None", value: "none", id: "margin-none" },
+         { label: "Small", value: "small", id: "margin-small" },
+         { label: "Medium", value: "medium", id: "margin-medium" },
+         { label: "Large", value: "large", id: "margin-large" },
+      ],
+      default: "none",
+      description: "Vertical margin spacing",
+      group: "settings",
+      placeholder: "Select a margin...",
+      label: "Margin",
+      ...config,
+   }),
+};