vue-wswg-editor 0.0.10 → 0.0.12

package/src/util/fieldConfig.ts

@@ -26,6 +26,8 @@ export type EditorFieldType =
    | "repeater" // ✅
    | "margin" // ✅
    | "info" // ✅
+   | "image" // ✅
+   | "object" // ✅
    | "custom"; // 🔌 (image, json, video, richtext, etc)
 
 /**
@@ -57,6 +59,8 @@ export interface EditorFieldConfig {
    // Repeater-specific properties
    repeaterFields?: Record<string, EditorFieldConfig>;
    repeaterFieldLabel?: string; // attribute key for the repeater field label
+   // Object-specific properties
+   objectFields?: Record<string, EditorFieldConfig>; // nested fields for object type
    // String length validation
    minLength?: number;
    maxLength?: number;
@@ -69,6 +73,9 @@ export interface EditorFieldConfig {
    // Image specific
    // Whether the image is responsive eg: xs, sm, md, lg, xl, primary
    responsive?: boolean;
+   // Range specific
+   // Suffix to display after the range value (e.g., "px", "%", "rem")
+   valueSuffix?: string;
 }
 
 /**
@@ -156,6 +163,11 @@ export const createField = {
       ...config,
    }),
 
+   image: (config: Partial<EditorFieldConfig> = {}): EditorFieldConfig => ({
+      type: "image",
+      ...config,
+   }),
+
    margin: (config: Partial<EditorFieldConfig> = {}): EditorFieldConfig => ({
       type: "margin",
       options: [
@@ -177,4 +189,14 @@ export const createField = {
       type: "info",
       ...config,
    }),
+
+   // Object field for nested properties (e.g., meta.description)
+   object: (
+      objectFields: Record<string, EditorFieldConfig>,
+      config: Partial<EditorFieldConfig> = {}
+   ): EditorFieldConfig => ({
+      type: "object",
+      objectFields,
+      ...config,
+   }),
 };

package/src/util/helpers.ts

@@ -148,7 +148,7 @@ export function toCamelCase(input: string): string {
    if (parts.length === 0) return "";
 
    return (
-      parts?.[0]?.toLowerCase() +
+      parts[0].toLowerCase() +
       parts
          .slice(1)
          .map((p) => p.charAt(0).toUpperCase() + p.slice(1).toLowerCase())

package/src/util/registry.ts

@@ -3,14 +3,6 @@ import type { EditorFieldConfig } from "./fieldConfig";
 import type { Block } from "../types/Block";
 import type { Layout } from "../types/Layout";
 import { generateNameVariations, toCamelCase } from "./helpers";
-// Dynamic imports for all page builder blocks and layouts
-// IMPORTANT: These globs use the @page-builder alias which must be configured in the CONSUMING APP's vite.config.ts
-// The globs are evaluated by the consuming app's Vite build, so they resolve relative to the consuming app's project root
-// The consuming app should have: "@page-builder": fileURLToPath(new URL("../page-builder", import.meta.url))
-import { modules as layoutModules } from "vue-wswg-editor:layouts";
-import { modules as blockModules } from "vue-wswg-editor:blocks";
-import { modules as fieldModules } from "vue-wswg-editor:fields";
-import { modules as thumbnailModules } from "vue-wswg-editor:thumbnails";
 
 // Load all thumbnail images - Vite will process these as assets and provide URLs
 // For images, Vite returns the URL as the default export when using eager: true
@@ -22,6 +14,8 @@ import { modules as thumbnailModules } from "vue-wswg-editor:thumbnails";
 export const pageBuilderBlocks: Ref<Record<string, Block>> = shallowRef({});
 export const pageBuilderLayouts: Ref<Record<string, Layout>> = shallowRef({});
 const pageBuilderBlockFields: Ref<Record<string, any>> = ref({});
+// Store thumbnail modules after lazy loading
+let thumbnailModulesCache: Record<string, any> | null = null;
 
 ////////////////////////////////////////////////////////////
 // Helper Functions
@@ -55,7 +49,7 @@ function markComponentsAsRaw(obj: any): any {
  * Extract the default export from a module, handling different module formats
  * Works with both eager and lazy-loaded modules from import.meta.glob
  */
-function getModuleDefault(module: any): any {
+export function getModuleDefault(module: any): any {
    if (!module) return undefined;
 
    // If module is a function (lazy-loaded), we'd need to await it, but with eager: true it should be resolved
@@ -98,11 +92,11 @@ export function getLayouts(): Record<string, Layout> {
  * @returns Thumbnail URL or undefined if not found
  */
 export function getBlockThumbnailUrl(directory: string | undefined): string | undefined {
-   if (!directory) return undefined;
+   if (!directory || !thumbnailModulesCache) return undefined;
    // Construct the thumbnail path from the directory
    const thumbnailPath = `${directory}/thumbnail.png`;
    // Look up the thumbnail in the preloaded modules
-   const thumbnailModule = thumbnailModules[thumbnailPath];
+   const thumbnailModule = thumbnailModulesCache[thumbnailPath];
    if (!thumbnailModule) return undefined;
    // For images, Vite returns an object with a default property containing the URL
    // When using eager: true, the module is already loaded
@@ -152,6 +146,9 @@ async function initialiseBlockFieldsRegistry(): Promise<void> {
       delete pageBuilderBlockFields.value[key];
    });
 
+   // Lazy load virtual modules to prevent initialization order issues
+   const { modules: fieldModules } = await import("vue-wswg-editor:fields");
+
    for (const [path, module] of Object.entries(fieldModules)) {
       let resolvedModule = module;
       // If module is a function (lazy-loaded), call it to get the actual module
@@ -169,19 +166,21 @@ async function initialiseLayoutRegistry(): Promise<void> {
       delete pageBuilderLayouts.value[key];
    });
 
-   // Use layoutModules if available (from vite plugin), otherwise fall back to layoutModules
-   const modulesToUse = layoutModules;
+   // Lazy load virtual modules to prevent initialization order issues
+   const { modules: layoutModules } = await import("vue-wswg-editor:layouts");
 
    // Handle both eager-loaded modules and lazy-loaded modules (functions)
-   for (const [, module] of Object.entries(modulesToUse)) {
+   for (const [, module] of Object.entries(layoutModules)) {
       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 layout = getModuleDefault(resolvedModule);
-      // exclude modules without name
-      if (!layout || !layout.label) return;
+      // exclude modules without name or label - use continue instead of return to skip this iteration
+      if (!layout || !layout.label) {
+         continue;
+      }
       // Mark layout component as raw to prevent Vue from making it reactive
       pageBuilderLayouts.value[layout.__name] = markRaw(layout);
    }
@@ -193,6 +192,9 @@ async function initialiseBlockRegistry(): Promise<void> {
       delete pageBuilderBlocks.value[key];
    });
 
+   // Lazy load virtual modules to prevent initialization order issues
+   const { modules: blockModules } = await import("vue-wswg-editor:blocks");
+
    // Load all blocks from the glob pattern
    // With eager: true, module is the actual module object, not a loader function
    for (const [path, module] of Object.entries(blockModules)) {
@@ -220,11 +222,16 @@ async function initialiseBlockRegistry(): Promise<void> {
 }
 
 export async function initialiseRegistry(): Promise<void> {
-   await initialiseLayoutRegistry();
-   await initialiseBlockFieldsRegistry();
-   await initialiseBlockRegistry();
-}
+   try {
+      // Lazy load thumbnail modules for getBlockThumbnailUrl
+      const { modules: thumbnailModules } = await import("vue-wswg-editor:thumbnails");
+      thumbnailModulesCache = thumbnailModules;
 
-// Initialise the registry when the module is loaded
-// Use void to handle the promise without blocking
-void initialiseRegistry();
+      await initialiseLayoutRegistry();
+      await initialiseBlockFieldsRegistry();
+      await initialiseBlockRegistry();
+   } catch (error) {
+      console.error("[vue-wswg-editor:registry] Error during registry initialization:", error);
+      throw error;
+   }
+}

package/src/util/validation.ts

@@ -1,9 +1,19 @@
-import type { ValidatorFunction } from "./fieldConfig";
+import type { EditorFieldConfig, ValidatorFunction } from "./fieldConfig";
 import { getBlockComponent, getLayoutFields } from "./registry";
 import { toNiceName } from "./helpers";
 
-export function validateField(value: any, validator: ValidatorFunction) {
-   return validator(value);
+export function validateField(value: any, fieldConfig: EditorFieldConfig) {
+   // Create generic validator from field config properties (minLength, maxLength, etc.)
+   const genericValidator = createGenericValidator(fieldConfig);
+
+   // Combine generic validator with custom validator if provided
+   const combinedValidator = combineValidators(genericValidator, fieldConfig.validator);
+
+   // If no validator exists, clear any error message
+   if (!combinedValidator) return true;
+
+   // Validate the value
+   return combinedValidator(value);
 }
 
 export interface ValidationResult {
@@ -48,18 +58,15 @@ async function validateSettings(value: any, settingsKey: string = "settings"): P
 
    if (!value[settingsKey]) return validationResult;
    const layoutOptions = getLayoutFields(value[settingsKey].layout);
-
    // Loop each field in the settings
    for (const field in value[settingsKey]) {
       const fieldConfig = layoutOptions[field];
-      // If the field has a validator, validate it
-      if (fieldConfig?.validator) {
-         const result = await validateField(value[settingsKey][field], fieldConfig.validator);
-         // If validation fails (returns false or a string), add to validation results
-         if (result !== true) {
-            validationResult.errors[field] = result;
-            validationResult.isValid = false;
-         }
+      if (!fieldConfig) continue;
+      const result = await validateField(value[settingsKey][field], fieldConfig);
+      // If validation fails (returns false or a string), add to validation results
+      if (result !== true) {
+         validationResult.errors[fieldConfig.label || field] = result;
+         validationResult.isValid = false;
       }
    }
 
@@ -81,7 +88,7 @@ async function validateBlocks(value: any, blocksKey: string = "blocks"): Promise
 
       // Add validation results entry for the section
       validationResults[blockType] = {
-         title: toNiceName(blockType),
+         title: blockComponent.label || toNiceName(blockType),
          isValid: true,
          errors: {},
       };
@@ -94,17 +101,165 @@ async function validateBlocks(value: any, blocksKey: string = "blocks"): Promise
       // Loop each field in the block
       for (const field in blockComponent?.fields || {}) {
          const fieldConfig = blockComponent?.fields?.[field];
-         // If the field has a validator, validate it
-         if (fieldConfig?.validator) {
-            const result = await validateField(block[field], fieldConfig.validator);
-            // If validation fails (returns false or a string), add to validation results
-            if (result !== true) {
-               validationResults[blockType].errors[field] = result;
-               validationResults[blockType].isValid = false;
-            }
+         if (!fieldConfig) continue;
+         // Validate
+         const result = await validateField(block[field], fieldConfig);
+         // If validation fails (returns false or a string), add to validation results
+         if (result !== true) {
+            validationResults[blockType].errors[fieldConfig.label || field] = result;
+            validationResults[blockType].isValid = false;
          }
       }
    }
    // Return validation results if there are any errors, otherwise return true
    return validationResults;
 }
+
+/**
+ * Creates a generic validator function based on field config properties
+ * Handles: required, minLength, maxLength, min, max, minItems, maxItems
+ * Returns a ValidatorFunction that can be combined with custom validators
+ */
+export function createGenericValidator(fieldConfig: EditorFieldConfig): ValidatorFunction | null {
+   const validations: Array<(value: any) => Promise<boolean | string>> = [];
+
+   // Required validation
+   if (fieldConfig.required) {
+      validations.push(async (value: any) => {
+         if (value === null || value === undefined || value === "") {
+            return "This field is required";
+         }
+         if (Array.isArray(value) && value.length === 0) {
+            return "This field is required";
+         }
+         return true;
+      });
+   }
+
+   // String length validations (for text, textarea, email, url)
+   if (
+      fieldConfig.type === "text" ||
+      fieldConfig.type === "textarea" ||
+      fieldConfig.type === "email" ||
+      fieldConfig.type === "url"
+   ) {
+      if (fieldConfig.minLength !== undefined) {
+         validations.push(async (value: any) => {
+            if (value === null || value === undefined || value === "") return true; // Skip if empty (required handles this)
+            const strValue = String(value);
+            if (strValue.length < fieldConfig.minLength!) {
+               return `Must be at least ${fieldConfig.minLength} characters`;
+            }
+            return true;
+         });
+      }
+
+      if (fieldConfig.maxLength !== undefined) {
+         validations.push(async (value: any) => {
+            if (value === null || value === undefined || value === "") return true; // Skip if empty
+            const strValue = String(value);
+            if (strValue.length >= fieldConfig.maxLength!) {
+               return `Must be no more than ${fieldConfig.maxLength} characters`;
+            }
+            return true;
+         });
+      }
+   }
+
+   // Number validations
+   if (fieldConfig.type === "number" || fieldConfig.type === "range") {
+      if (fieldConfig.min !== undefined) {
+         validations.push(async (value: any) => {
+            if (value === null || value === undefined || value === "") return true; // Skip if empty
+            const numValue = Number(value);
+            if (isNaN(numValue) || numValue < fieldConfig.min!) {
+               return `Must be at least ${fieldConfig.min}`;
+            }
+            return true;
+         });
+      }
+
+      if (fieldConfig.max !== undefined) {
+         validations.push(async (value: any) => {
+            if (value === null || value === undefined || value === "") return true; // Skip if empty
+            const numValue = Number(value);
+            if (isNaN(numValue) || numValue > fieldConfig.max!) {
+               return `Must be no more than ${fieldConfig.max}`;
+            }
+            return true;
+         });
+      }
+   }
+
+   // Repeater validations
+   if (fieldConfig.type === "repeater") {
+      if (fieldConfig.minItems !== undefined) {
+         validations.push(async (value: any) => {
+            if (!Array.isArray(value)) return true; // Skip if not array
+            if (value.length < fieldConfig.minItems!) {
+               return `Must have at least ${fieldConfig.minItems} item${fieldConfig.minItems! > 1 ? "s" : ""}`;
+            }
+            return true;
+         });
+      }
+
+      if (fieldConfig.maxItems !== undefined) {
+         validations.push(async (value: any) => {
+            if (!Array.isArray(value)) return true; // Skip if not array
+            if (value.length > fieldConfig.maxItems!) {
+               return `Must have no more than ${fieldConfig.maxItems} item${fieldConfig.maxItems! > 1 ? "s" : ""}`;
+            }
+            return true;
+         });
+      }
+   }
+
+   // If no built-in validations, return null
+   if (validations.length === 0) {
+      return null;
+   }
+
+   // Return a combined validator function
+   return async (value: any): Promise<boolean | string> => {
+      for (const validation of validations) {
+         const result = await validation(value);
+         if (result !== true) {
+            return result;
+         }
+      }
+      return true;
+   };
+}
+
+/**
+ * Combines a generic validator (built-in validations) with a custom validator
+ * Runs built-in validations first, then custom validator if provided
+ */
+export function combineValidators(
+   genericValidator: ValidatorFunction | null,
+   customValidator?: ValidatorFunction
+): ValidatorFunction | undefined {
+   if (!genericValidator && !customValidator) {
+      return undefined;
+   }
+
+   if (!genericValidator) {
+      return customValidator;
+   }
+
+   if (!customValidator) {
+      return genericValidator;
+   }
+
+   // Return combined validator that runs both
+   return async (value: any): Promise<boolean | string> => {
+      // Run generic validator first
+      const genericResult = await genericValidator(value);
+      if (genericResult !== true) {
+         return genericResult;
+      }
+
+      // Then run custom validator
+      return await customValidator(value);
+   };
+}

package/types/vue-wswg-editor.d.ts

@@ -0,0 +1,161 @@
+// Type declarations for vue-wswg-editor library dependencies
+// These declarations allow the library to use internal dependencies without requiring
+// consumers to install their type definitions
+
+// SortableJS type declaration - self-contained for library consumers
+// This allows the library to use sortablejs without requiring consumers to install @types/sortablejs
+declare module "sortablejs" {
+   interface SortableOptions {
+      group?:
+         | string
+         | {
+              name?: string;
+              pull?: boolean | string | ((to: any, from: any, dragEl: HTMLElement) => boolean | string);
+              put?: boolean | string | ((to: any) => boolean | string);
+           };
+      sort?: boolean;
+      delay?: number;
+      delayOnTouchStart?: boolean;
+      touchStartThreshold?: number;
+      disabled?: boolean;
+      store?: { get: (sortable: any) => any[]; set: (sortable: any) => void };
+      animation?: number;
+      easing?: string;
+      handle?: string;
+      filter?: string | ((event: Event | TouchEvent) => boolean);
+      preventOnFilter?: boolean;
+      draggable?: string;
+      dataIdAttr?: string;
+      ghostClass?: string;
+      chosenClass?: string;
+      dragClass?: string;
+      swapThreshold?: number;
+      invertSwap?: boolean;
+      invertedSwapThreshold?: number;
+      direction?: "vertical" | "horizontal";
+      forceFallback?: boolean;
+      fallbackClass?: string;
+      fallbackOnBody?: boolean;
+      fallbackTolerance?: number;
+      fallbackOffset?: { x: number; y: number };
+      supportPointer?: boolean;
+      emptyInsertThreshold?: number;
+      setData?: (dataTransfer: DataTransfer, dragEl: HTMLElement) => void;
+      onStart?: (evt: any) => void;
+      onEnd?: (evt: any) => void;
+      onAdd?: (evt: any) => void;
+      onUpdate?: (evt: any) => void;
+      onSort?: (evt: any) => void;
+      onRemove?: (evt: any) => void;
+      onFilter?: (evt: any) => void;
+      onMove?: (evt: any, originalEvent: Event) => boolean | -1 | 1 | void;
+      onClone?: (evt: any) => void;
+      [key: string]: any;
+   }
+
+   class Sortable {
+      constructor(element: HTMLElement, options?: SortableOptions);
+      option(name: string, value?: any): any;
+      destroy(): void;
+      el: HTMLElement;
+      options: SortableOptions;
+      static active: Sortable | null;
+      static utils: {
+         on(el: HTMLElement, event: string, fn: (evt: Event) => void): void;
+         off(el: HTMLElement, event: string, fn: (evt: Event) => void): void;
+         get(el: HTMLElement, path: string): any;
+         set(el: HTMLElement, path: string, value: any): void;
+         closest(el: HTMLElement, selector: string): HTMLElement | null;
+         matches(el: HTMLElement, selector: string): boolean;
+         find(el: HTMLElement, selector: string): HTMLElement[];
+         create(tag: string, classes?: string): HTMLElement;
+         is(el: HTMLElement, selector: string): boolean;
+         extend(dest: any, ...src: any[]): any;
+         throttle(fn: (...args: any[]) => any, wait: number): (...args: any[]) => any;
+         debounce(fn: (...args: any[]) => any, wait: number): (...args: any[]) => any;
+         clone(el: HTMLElement): HTMLElement;
+         toggleClass(el: HTMLElement, name: string, state?: boolean): void;
+         index(el: HTMLElement, selector?: string): number;
+         nextTick(fn: () => void): void;
+         cancelNextTick(id: number): void;
+         detectDirection(el: HTMLElement): "vertical" | "horizontal";
+         getChild(el: HTMLElement, childNum: number): HTMLElement | null;
+      };
+      static mount(...plugins: any[]): void;
+      static create(element: HTMLElement, options?: SortableOptions): Sortable;
+      static get(element: HTMLElement): Sortable | undefined;
+      static readonly version: string;
+   }
+
+   export = Sortable;
+   export default Sortable;
+}
+
+// Yup type declaration - self-contained for library consumers
+// This allows the library to use yup without requiring consumers to install yup types
+declare module "yup" {
+   export interface Schema<T = any> {
+      validate(value: any, options?: any): Promise<T>;
+      isValid(value: any, options?: any): Promise<boolean>;
+      validateSync(value: any, options?: any): T;
+      isValidSync(value: any, options?: any): boolean;
+      cast(value: any, options?: any): T;
+      nullable(isNullable?: boolean): Schema<T | null>;
+      required(message?: string): Schema<T>;
+      notRequired(): Schema<T | undefined>;
+      default(value: T | (() => T)): Schema<T>;
+      typeError(message?: string): Schema<T>;
+      oneOf(values: any[], message?: string): Schema<T>;
+      notOneOf(values: any[], message?: string): Schema<T>;
+      when(keys: string | string[], builder: any): Schema<T>;
+      test(
+         name: string,
+         message: string | ((value: any) => string),
+         test: (value: any) => boolean | Promise<boolean>
+      ): Schema<T>;
+      transform(transform: (value: any) => any): Schema<T>;
+   }
+
+   export function string(): Schema<string>;
+   export function number(): Schema<number>;
+   export function boolean(): Schema<boolean>;
+   export function date(): Schema<Date>;
+   export function object(shape?: Record<string, Schema>): Schema<Record<string, any>>;
+   export function array(of?: Schema): Schema<any[]>;
+   export function mixed(): Schema<any>;
+   export function lazy(fn: () => Schema): Schema;
+   export function reach(schema: Schema, path: string, value?: any, context?: any): Schema;
+   export function ref(path: string, options?: { contextPrefix?: string }): any;
+   export function setLocale(customLocale: Record<string, any>): void;
+   export function getLocale(): Record<string, any>;
+   export function addMethod(schemaType: string, name: string, method: (...args: any[]) => any): void;
+   export class ValidationError extends Error {
+      value: any;
+      path: string;
+      type?: string;
+      errors: string[];
+      inner: ValidationError[];
+      params?: Record<string, any>;
+      constructor(errors: string | string[], value: any, path?: string, type?: string);
+   }
+   export const mixed: {
+      (): Schema<any>;
+   };
+}
+
+// Virtual modules created by vue-wswg-editor vite plugin
+declare module "vue-wswg-editor:layouts" {
+   export const modules: Record<string, () => Promise<any>>;
+}
+
+declare module "vue-wswg-editor:blocks" {
+   export const modules: Record<string, () => Promise<any>>;
+}
+
+declare module "vue-wswg-editor:fields" {
+   export const modules: Record<string, () => Promise<any>>;
+}
+
+declare module "vue-wswg-editor:thumbnails" {
+   export const modules: Record<string, () => Promise<any>>;
+}