vue-wswg-editor 0.0.11 → 0.0.13

package/dist/types/components/PageBuilderSidebar/PageBuilderSidebar.vue.d.ts

@@ -0,0 +1,37 @@
+type __VLS_Props = {
+    editable?: boolean;
+    blocksKey?: string;
+    settingsKey?: string;
+    hasPageSettings?: boolean;
+    activeSettingsTab?: string;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: any;
+    "activeBlock"?: any;
+    "hoveredBlockId"?: string | null;
+    "showPageSettings"?: boolean;
+    "showAddBlockMenu"?: boolean;
+    "editorViewport"?: "desktop" | "mobile";
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+    "update:hoveredBlockId": (value: string | null | undefined) => any;
+    "update:editorViewport": (value: "desktop" | "mobile" | undefined) => any;
+    "update:activeBlock": (value: any) => any;
+    "update:showPageSettings": (value: boolean | undefined) => any;
+    "update:showAddBlockMenu": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onUpdate:hoveredBlockId"?: ((value: string | null | undefined) => any) | undefined;
+    "onUpdate:editorViewport"?: ((value: "desktop" | "mobile" | undefined) => any) | undefined;
+    "onUpdate:activeBlock"?: ((value: any) => any) | undefined;
+    "onUpdate:showPageSettings"?: ((value: boolean | undefined) => any) | undefined;
+    "onUpdate:showAddBlockMenu"?: ((value: boolean | undefined) => any) | undefined;
+}>, {
+    editable: boolean;
+    blocksKey: string;
+    settingsKey: string;
+    hasPageSettings: boolean;
+    activeSettingsTab: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/components/PageBuilderToolbar/PageBuilderToolbar.vue.d.ts

@@ -0,0 +1,28 @@
+type __VLS_Props = {
+    hasPageSettings: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    "editorViewport"?: "desktop" | "mobile";
+    "activeBlock"?: any;
+    "showPageSettings"?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:editorViewport": (value: "desktop" | "mobile" | undefined) => any;
+    "update:activeBlock": (value: any) => any;
+    "update:showPageSettings": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:editorViewport"?: ((value: "desktop" | "mobile" | undefined) => any) | undefined;
+    "onUpdate:activeBlock"?: ((value: any) => any) | undefined;
+    "onUpdate:showPageSettings"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/PageRenderer/PageRenderer.vue.d.ts

@@ -0,0 +1,15 @@
+import type { Block } from "../../types/Block";
+type __VLS_Props = {
+    blocks: Block[];
+    layout?: string;
+    settings?: Record<string, any>;
+    withLayout?: boolean;
+    theme?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    settings: Record<string, any>;
+    layout: string;
+    theme: string;
+    withLayout: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/components/PageSettings/PageSettings.vue.d.ts

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    settingsKey?: string;
+    activeTab?: string;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: any;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
+    activeTab: string;
+    settingsKey: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/components/ResizeHandle/ResizeHandle.vue.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    sidebarWidth: (width: number) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onSidebarWidth?: ((width: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/types/components/WswgPageBuilder/WswgPageBuilder.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/WswgPageBuilder/WswgPageBuilder.vue.d.ts

@@ -0,0 +1,38 @@
+type __VLS_Props = {
+    editable?: boolean;
+    loading?: boolean;
+    url?: string;
+    showBrowserBar?: boolean;
+    blocksKey?: string;
+    settingsKey?: string;
+    defaultBlockMargin?: "none" | "small" | "medium" | "large";
+    theme?: string;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: Record<string, any>;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    loading?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Record<string, any> | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Record<string, any> | undefined) => any) | undefined;
+}>, {
+    url: string;
+    editable: boolean;
+    blocksKey: string;
+    settingsKey: string;
+    theme: string;
+    loading: boolean;
+    showBrowserBar: boolean;
+    defaultBlockMargin: "none" | "small" | "medium" | "large";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/index.d.ts

@@ -0,0 +1,13 @@
+export { createField } from "./util/fieldConfig";
+export type { EditorFieldConfig, ValidatorFunction } from "./util/fieldConfig";
+export { getLayouts, initialiseRegistry, initialiseLayoutRegistry, initialiseBlockRegistry } from "./util/registry";
+export { validateField, validateAllFields, type ValidationResult } from "./util/validation";
+export { getActiveTheme, setActiveTheme, getThemeThumbnail, getThemes } from "./util/theme-registry";
+export type { Theme } from "./types/Theme";
+export type { Layout } from "./types/Layout";
+export type { Block } from "./types/Block";
+export { default as WswgPageBuilder } from "./components/WswgPageBuilder/WswgPageBuilder.vue";
+export { default as PageRenderer } from "./components/PageRenderer/PageRenderer.vue";
+export { createIframeApp, getIframeAppModuleUrl } from "./components/IframePreview/iframePreviewApp";
+export type { IframeAppState, IframeAppCallbacks } from "./components/IframePreview/iframePreviewApp";
+import "./style.css";

package/dist/types/util/fieldConfig.d.ts

@@ -0,0 +1,87 @@
+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" | "info" | "image" | "object" | "custom";
+/**
+ * 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;
+    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;
+    repeaterFields?: Record<string, EditorFieldConfig>;
+    repeaterFieldLabel?: string;
+    objectFields?: Record<string, EditorFieldConfig>;
+    minLength?: number;
+    maxLength?: number;
+    min?: number;
+    max?: number;
+    minItems?: number;
+    maxItems?: number;
+    responsive?: boolean;
+    valueSuffix?: string;
+}
+/**
+ * Helper function to create editor field configurations
+ */
+export declare const createField: {
+    custom: (config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
+    text: (config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
+    textarea: (config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
+    number: (config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
+    boolean: (config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
+    email: (config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
+    url: (config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
+    select: <T>(options: Array<{
+        label: string;
+        value: T;
+        id: string;
+    }>, config?: Partial<Omit<EditorFieldConfig, "options">>) => EditorFieldConfig;
+    radio: <T>(options: Array<{
+        label: string;
+        value: T;
+        id: string;
+    }>, config?: Partial<Omit<EditorFieldConfig, "options">>) => EditorFieldConfig;
+    checkbox: <T>(options: Array<{
+        label: string;
+        value: T;
+        id: string;
+    }>, config?: Partial<Omit<EditorFieldConfig, "options">>) => EditorFieldConfig;
+    color: (config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
+    range: (config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
+    repeater: (repeaterFields: Record<string, EditorFieldConfig>, config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
+    image: (config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
+    margin: (config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
+    info: (config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
+    object: (objectFields: Record<string, EditorFieldConfig>, config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
+};

package/dist/types/util/helpers.d.ts

@@ -0,0 +1,28 @@
+/**
+ * File lookup utility for finding Vue components with flexible naming conventions
+ *
+ * This utility handles different naming formats (snake_case, camelCase, kebab-case, PascalCase)
+ * and various file/folder structures to provide maximum flexibility in component organization.
+ */
+/**
+ * Converts a string to different naming conventions
+ */
+export declare function generateNameVariations(name: string): string[];
+/**
+ * Generates file path patterns to try for a given block name and optional file name
+ * If fileName is provided, generates patterns using variations of both blockName (for directory) and fileName (for file)
+ * If fileName is not provided, uses blockName variations for both directory and file
+ *
+ * @param basePath - Base path (e.g., "@page-builder/blocks/")
+ * @param blockName - Block name in any format (e.g., "heroSection", "hero-section")
+ * @param fileName - Optional file name (e.g., "options.ts", "fields.ts"). If not provided, uses blockName
+ * @returns Array of path patterns to try
+ */
+export declare function generateFilePathPatterns(basePath: string, blockName: string, fileName?: string): string[];
+/**
+ * Converts a any type of string to camelCase
+ * e.g., "hero_section" or "HeroSection" or "hero-section" or "heroSection" -> "HeroSection"
+ * e.g., "component_not_found" or "ComponentNotFound" or "component-not-found" or "componentNotFound" -> "ComponentNotFound"
+ */
+export declare function toCamelCase(input: string): string;
+export declare function toNiceName(input: string): string;

package/dist/types/util/registry.d.ts

@@ -0,0 +1,27 @@
+import { type Ref } from "vue";
+import type { EditorFieldConfig } from "./fieldConfig";
+import type { Block } from "../types/Block";
+import type { Layout } from "../types/Layout";
+/**
+ * Registry of all page builder blocks, layouts & fields
+ */
+export declare const pageBuilderBlocks: Ref<Record<string, Block>>;
+export declare const pageBuilderLayouts: Ref<Record<string, Layout>>;
+/**
+ * Extract the default export from a module, handling different module formats
+ * Works with both eager and lazy-loaded modules from import.meta.glob
+ */
+export declare function getModuleDefault(module: any): any;
+export declare function getBlocks(): Record<string, Block>;
+export declare function getLayouts(): Record<string, Layout>;
+/**
+ * Get the thumbnail URL for a block directory
+ * @param directory - Block directory path (e.g., "@page-builder/blocks/hero-section")
+ * @returns Thumbnail URL or undefined if not found
+ */
+export declare function getBlockThumbnailUrl(directory: string | undefined): string | undefined;
+export declare function getBlockComponent(blockType: string): Block | undefined;
+export declare function getLayoutFields(layoutName: string): Record<string, EditorFieldConfig>;
+export declare function initialiseLayoutRegistry(): Promise<void>;
+export declare function initialiseBlockRegistry(): Promise<void>;
+export declare function initialiseRegistry(): Promise<void>;

package/dist/types/util/theme-registry.d.ts

@@ -0,0 +1,42 @@
+import { type Ref } from "vue";
+import type { Theme } from "../types/Theme";
+import type { Layout } from "../types/Layout";
+import type { Block } from "../types/Block";
+import { EditorFieldConfig } from "./fieldConfig";
+/**
+ * Registry of all page builder themes, blocks, layouts, fields & thumbnails
+ */
+export declare const pageBuilderThemes: Ref<Record<string, Theme>>;
+export declare const themeLayouts: Ref<Record<string, Layout>>;
+export declare const themeBlocks: Ref<Record<string, Block>>;
+export declare const themeBlockFields: Ref<Record<string, Record<string, EditorFieldConfig>>>;
+export declare const activeThemeId: Ref<string | undefined>;
+/**
+ * Extract the default export from a module, handling different module formats
+ * Works with both eager and lazy-loaded modules from import.meta.glob
+ */
+export declare function getModuleDefault(module: any): any;
+/**************************************************
+ * THEMES
+ **************************************************/
+export declare function initialiseThemeRegistry(): Promise<void>;
+export declare function getThemes(): Theme[];
+export declare function getActiveTheme(): Theme;
+export declare function setActiveTheme(themeId?: string): Promise<void>;
+export declare function getThemeThumbnail(themeDirectory: string): string | undefined;
+/**************************************************
+ * LAYOUTS
+ **************************************************/
+export declare function initialiseLayoutRegistry(): Promise<void>;
+export declare function getLayout(layoutType: string): Layout | undefined;
+/**************************************************
+ * BLOCKS
+ **************************************************/
+export declare function initialiseBlockRegistry(): Promise<void>;
+export declare function getBlock(blockType: string): Block | undefined;
+export declare function getBlockThumbnail(blockDirectory: string): string | undefined;
+/**
+ * Initialize the registry with a specific theme
+ * @param themeId - The theme ID to load blocks/layouts from
+ */
+export declare function initialiseRegistry(themeId?: string, useEditingRegistry?: boolean): Promise<void>;

package/dist/types/util/validation.d.ts

@@ -0,0 +1,26 @@
+import type { EditorFieldConfig, ValidatorFunction } from "./fieldConfig";
+export declare function validateField(value: any, fieldConfig: EditorFieldConfig): Promise<boolean | string | ValidationResult>;
+export interface ValidationResult {
+    title: string;
+    isValid: boolean;
+    errors: Record<string, string | boolean | ValidationResult>;
+}
+/**
+ * Validate all fields in the value
+ * @param value - The value to validate
+ * @param blocksKey - The key of the blocks in the value
+ * @param settingsKey - The key of the settings in the value
+ * @returns A record of validation results
+ */
+export declare function validateAllFields(value: any, blocksKey?: string, settingsKey?: string): Promise<Record<string, ValidationResult>>;
+/**
+ * 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 declare function createGenericValidator(fieldConfig: EditorFieldConfig): ValidatorFunction | null;
+/**
+ * Combines a generic validator (built-in validations) with a custom validator
+ * Runs built-in validations first, then custom validator if provided
+ */
+export declare function combineValidators(genericValidator: ValidatorFunction | null, customValidator?: ValidatorFunction): ValidatorFunction | undefined;

package/dist/types/vite-plugin.d.ts

@@ -0,0 +1,9 @@
+import type { Plugin } from "vite";
+export interface VueWswgEditorPluginOptions {
+    /**
+     * Root directory in the host project.
+     * Example: "@/features/homepage"
+     */
+    rootDir: string;
+}
+export declare function vueWswgEditorPlugin(options: VueWswgEditorPluginOptions): Plugin;

package/dist/vite-plugin.js

@@ -0,0 +1,80 @@
+function a(r) {
+  const e = {
+    blocks: "\0vue-wswg-editor:blocks",
+    fields: "\0vue-wswg-editor:fields",
+    layouts: "\0vue-wswg-editor:layouts",
+    thumbnails: "\0vue-wswg-editor:thumbnails",
+    themes: "\0vue-wswg-editor:themes"
+  };
+  return {
+    name: "vue-wswg-editor-glob-plugin",
+    enforce: "pre",
+    // Run before other plugins to ensure import.meta.glob is processed correctly
+    config(t) {
+      var l;
+      const s = t.optimizeDeps || {}, o = s.exclude;
+      let u;
+      Array.isArray(o) ? u = [...o] : typeof o == "string" ? u = [o] : u = [];
+      const n = [
+        "vue-wswg-editor",
+        "vue-wswg-editor:layouts",
+        "vue-wswg-editor:blocks",
+        "vue-wswg-editor:fields",
+        "vue-wswg-editor:thumbnails",
+        "vue-wswg-editor:themes"
+      ];
+      for (const i of n)
+        u.includes(i) || u.push(i);
+      return {
+        optimizeDeps: {
+          ...s,
+          exclude: u,
+          esbuildOptions: {
+            ...s.esbuildOptions,
+            plugins: [
+              ...((l = s.esbuildOptions) == null ? void 0 : l.plugins) || [],
+              {
+                name: "vue-wswg-editor-virtual-modules",
+                setup(i) {
+                  i.onResolve({ filter: /^vue-wswg-editor:/ }, () => ({ external: !0 }));
+                }
+              }
+            ]
+          }
+        }
+      };
+    },
+    resolveId(t) {
+      if (t.startsWith("vue-wswg-editor:")) {
+        const o = t.replace("vue-wswg-editor:", "");
+        if (o in e)
+          return e[o];
+      }
+      if (Object.values(e).includes(t))
+        return t;
+    },
+    load(t) {
+      switch (t) {
+        case e.layouts:
+          return `export const modules = import.meta.glob("${r.rootDir}/*/layout/**/*.vue", { eager: true });`;
+        case e.blocks:
+          return `export const modules = import.meta.glob("${r.rootDir}/*/blocks/**/*.vue", { eager: true });`;
+        case e.fields:
+          return `export const modules = import.meta.glob("${r.rootDir}/*/blocks/**/fields.ts", { eager: true });`;
+        case e.thumbnails:
+          return `export const modules = import.meta.glob(["${r.rootDir}/*/blocks/**/thumbnail.png", "${r.rootDir}/*/thumbnail.jpg", "${r.rootDir}/*/thumbnail.png"], { eager: true });`;
+        case e.themes:
+          return `export const modules = import.meta.glob("${r.rootDir}/**/theme.config.js", { eager: true });`;
+        default:
+          return;
+      }
+    },
+    transform(t, s) {
+      if (Object.values(e).includes(s))
+        return null;
+    }
+  };
+}
+export {
+  a as vueWswgEditorPlugin
+};