vue-wswg-editor 0.0.8 → 0.0.10

package/src/components/ResizeHandle/ResizeHandle.vue

@@ -55,25 +55,25 @@ function startResize(event: MouseEvent) {
 <style scoped lang="scss">
 /* Resize handle styles */
 .resize-handle {
-   position: relative;
+   position: sticky;
    top: 0;
    right: 0;
-   z-index: 2;
+   z-index: 14;
    width: 3px;
-   height: 100%;
+   height: var(--editor-height);
    cursor: col-resize;
-   background-color: var(--grey-20);
+   background-color: #dbdee0;
    transition: all 0.2s ease-in-out;
 }
 
 .resize-handle:hover {
    width: 3px;
-   background-color: var(--yellow-40);
+   background-color: #fcd34d;
 }
 
 .resize-handle:active {
    width: 3px;
-   background-color: var(--yellow-50);
+   background-color: #fbbf24;
 }
 
 /* Add a subtle indicator when resizing */
@@ -81,12 +81,12 @@ function startResize(event: MouseEvent) {
    position: absolute;
    top: 50%;
    left: -6px;
-   z-index: 20;
+   z-index: 50;
    width: 14px;
    height: 40px;
    content: "";
-   background-color: var(--yellow-40);
-   border-radius: var(--border-radius-16);
+   background-color: #fcd34d;
+   border-radius: 8px;
    opacity: 0;
    transform: translateY(-50%);
    transition:
@@ -99,7 +99,7 @@ function startResize(event: MouseEvent) {
 }
 
 .resize-handle:active::before {
-   background-color: var(--yellow-50);
+   background-color: #fbbf24;
    opacity: 1;
 }
 </style>

package/src/components/WswgJsonEditor/WswgJsonEditor.vue

@@ -1,42 +1,41 @@
 <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 class="wswg-json-editor-loading flex h-full flex-col items-center justify-center gap-4">
+            <svg
+               class="size-9 animate-[spin_2000ms_linear_infinite]"
+               viewBox="0 0 24 24"
+               fill="none"
+               xmlns="http://www.w3.org/2000/svg"
+            >
+               <path
+                  d="M13 2a1 1 0 0 0-2 0v4.167a1 1 0 1 0 2 0V2ZM13 17.833a1 1 0 0 0-2 0V22a1 1 0 1 0 2 0v-4.167ZM16.834 12a1 1 0 0 1 1-1H22a1 1 0 0 1 0 2h-4.166a1 1 0 0 1-1-1ZM2 11a1 1 0 0 0 0 2h4.167a1 1 0 1 0 0-2H2ZM19.916 4.085a1 1 0 0 1 0 1.414l-2.917 2.917A1 1 0 1 1 15.585 7l2.917-2.916a1 1 0 0 1 1.414 0ZM8.415 16.999a1 1 0 0 0-1.414-1.414L4.084 18.5A1 1 0 1 0 5.5 19.916l2.916-2.917ZM15.585 15.585a1 1 0 0 1 1.414 0l2.917 2.916a1 1 0 1 1-1.414 1.415l-2.917-2.917a1 1 0 0 1 0-1.414ZM5.499 4.085a1 1 0 0 0-1.415 1.414l2.917 2.917A1 1 0 0 0 8.415 7L5.5 4.085Z"
+                  fill="#000000"
+               />
+            </svg>
+            <span>Loading</span>
          </div>
       </slot>
       <!-- WYSIWYG editor -->
-      <div v-else class="wswg-json-editor-canvas">
+      <div v-else class="wswg-json-editor-body">
          <!-- Page preview -->
-         <div class="wswg-json-editor-canvas-preview">
+         <div class="wswg-json-editor-preview">
             <div
-               class="mx-auto h-full overflow-hidden rounded-lg bg-white transition-all duration-300"
+               class="mx-auto flex h-full flex-col 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">
+               <BrowserNavigation v-if="showBrowserBar" class="browser-navigation-bar" :url="url" />
+               <div
+                  v-if="pageLayout"
+                  id="page-preview-viewport"
+                  class="overflow-hidden rounded-b-lg bg-white"
+                  :class="{ 'rounded-t-lg': !showBrowserBar }"
+               >
                   <component :is="pageLayout">
                      <template #default>
                         <!-- No blocks found -->
                         <EmptyState
-                           v-if="!pageData[blocksKey]?.length"
+                           v-if="!pageData?.[blocksKey]?.length"
                            v-model:showAddBlockMenu="showAddBlockMenu"
                            :editable="editable"
                            @block-added="handleAddBlock"
@@ -66,24 +65,36 @@
          <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 class="page-builder-sidebar-wrapper bg-white" :style="{ width: sidebarWidth + 'px' }">
+            <PageBuilderSidebar
+               v-model="pageData"
+               v-model:activeBlock="activeBlock"
+               v-model:hoveredBlockId="hoveredBlockId"
+               v-model:showPageSettings="showPageSettings"
+               v-model:showAddBlockMenu="showAddBlockMenu"
+               v-model:editorViewport="editorViewport"
+               :hasPageSettings="hasPageSettings"
+               :editable="editable"
+               :blocksKey="blocksKey"
+               :settingsKey="settingsKey"
+            />
+         </div>
       </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 {
+   ref,
+   shallowRef,
+   withDefaults,
+   watch,
+   type Component,
+   onBeforeMount,
+   nextTick,
+   computed,
+   onMounted,
+} from "vue";
 import ResizeHandle from "../ResizeHandle/ResizeHandle.vue";
 import PageBuilderSidebar from "../PageBuilderSidebar/PageBuilderSidebar.vue";
 import BrowserNavigation from "../BrowserNavigation/BrowserNavigation.vue";
@@ -123,7 +134,7 @@ 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>();
+const pageData = defineModel<Record<string, any>>();
 
 // Layout component - dynamically imported from page-builder directory
 // Using shallowRef to avoid making the component reactive (performance optimization)
@@ -177,6 +188,8 @@ function handleBlockClick(block: Block | null) {
 }
 
 function handleAddBlock(blockType: string, insertIndex?: number) {
+   if (!pageData.value) return;
+
    // Ensure blocks array exists
    if (!pageData.value[props.blocksKey]) {
       pageData.value[props.blocksKey] = [];
@@ -240,7 +253,7 @@ watch(
    (layoutName) => {
       loadLayout(layoutName);
    },
-   { immediate: true }
+   { immediate: false }
 );
 
 // Watch for activeBlock changes and scroll to the corresponding block in the preview
@@ -309,6 +322,10 @@ function initSortable() {
 }
 
 onBeforeMount(() => {
+   if (!pageData.value) {
+      pageData.value = {};
+   }
+
    if (!pageData.value?.[props.settingsKey]) {
       if (pageData.value) {
          pageData.value[props.settingsKey] = {};
@@ -340,22 +357,23 @@ onBeforeMount(() => {
       }
    }
 });
+
+onMounted(() => {
+   loadLayout(pageData.value?.[props.settingsKey]?.layout);
+});
 </script>
 
 <style lang="scss">
+$editor-background-color: #6a6a6a;
+
 .wswg-json-editor {
-   display: flex;
-   flex-direction: column;
-   width: 100%;
-   max-width: 100%;
-   height: 100vh;
+   --editor-height: calc(100vh);
 
-   &-header {
-      position: sticky;
-      top: 0;
-      z-index: 20;
-      background-color: #fff;
-   }
+   position: relative;
+   width: 100%;
+   max-width: 100vw;
+   height: var(--editor-height);
+   overflow-y: auto;
 
    &-loading {
       display: flex;
@@ -363,27 +381,47 @@ onBeforeMount(() => {
       justify-content: center;
    }
 
-   &-canvas {
+   &-body {
+      display: flex;
+      width: 100%;
+      background-color: $editor-background-color;
+   }
+
+   &-preview {
+      position: relative;
       display: flex;
       flex: 1;
       flex-grow: 1;
       flex-shrink: 0;
+      flex-direction: column;
       height: 100%;
-      overflow-y: auto;
-      background-color: #6a6a6a;
-
-      &-preview {
-         flex: 1;
-         flex-grow: 1;
-         flex-shrink: 0;
-         padding: 2rem;
+      min-height: 0;
+      padding: 1.5rem;
+
+      .browser-navigation-bar {
+         position: sticky;
+         top: 1.5rem;
+         z-index: 12;
+
+         &::before {
+            position: absolute;
+            top: -1.5rem;
+            left: 0;
+            z-index: -1;
+            width: 100%;
+            height: 100%;
+            content: "";
+            background-color: $editor-background-color;
+         }
       }
+   }
 
-      &-sidebar {
-         min-width: 300px;
-         padding: 2rem;
-         background: #fff;
-      }
+   .page-builder-sidebar-wrapper {
+      position: sticky;
+      top: 0;
+      z-index: 12;
+      height: var(--editor-height);
+      overflow-y: auto;
    }
 }
 </style>

package/src/index.ts

@@ -4,6 +4,7 @@ export { createField } from "./util/fieldConfig";
 export type { EditorFieldConfig, ValidatorFunction } from "./util/fieldConfig";
 export { getLayouts } from "./util/registry";
 export { validateField, validateAllFields } from "./util/validation";
+export type { ValidationResult } from "./util/validation";
 
 // Export components (component exports don't cause side effects until used)
 export { default as WswgJsonEditor } from "./components/WswgJsonEditor/WswgJsonEditor.vue";

package/src/types/Block.d.ts

@@ -9,7 +9,7 @@ export type Block = Component & {
    type: string;
    // Defined in template
    label?: string;
-   icon?: string;
+   emoji?: string; // A single emoji character
    // fields file
    fields?: Record<string, any>;
    // Auto generated from the component path

package/src/util/fieldConfig.ts

@@ -25,6 +25,7 @@ export type EditorFieldType =
    | "range" // ✅
    | "repeater" // ✅
    | "margin" // ✅
+   | "info" // ✅
    | "custom"; // 🔌 (image, json, video, richtext, etc)
 
 /**
@@ -170,4 +171,10 @@ export const createField = {
       label: "Margin",
       ...config,
    }),
+
+   // Display an info message
+   info: (config: Partial<EditorFieldConfig> = {}): EditorFieldConfig => ({
+      type: "info",
+      ...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/vite-plugin.ts

@@ -21,6 +21,55 @@ export function vueWswgEditorPlugin(options: VueWswgEditorPluginOptions): Plugin
       name: "vue-wswg-editor-glob-plugin",
       enforce: "pre", // Run before other plugins to ensure import.meta.glob is processed correctly
 
+      config(config) {
+         // Exclude vue-wswg-editor from dependency optimization to prevent esbuild
+         // from trying to resolve virtual modules before plugins run
+         const optimizeDeps = config.optimizeDeps || {};
+         const existingExclude = optimizeDeps.exclude;
+         let exclude: string[];
+         if (Array.isArray(existingExclude)) {
+            exclude = [...existingExclude];
+         } else if (typeof existingExclude === "string") {
+            exclude = [existingExclude];
+         } else {
+            exclude = [];
+         }
+         // Exclude the package and virtual modules
+         const itemsToExclude = [
+            "vue-wswg-editor",
+            "vue-wswg-editor:layouts",
+            "vue-wswg-editor:blocks",
+            "vue-wswg-editor:fields",
+            "vue-wswg-editor:thumbnails",
+         ];
+         for (const item of itemsToExclude) {
+            if (!exclude.includes(item)) {
+               exclude.push(item);
+            }
+         }
+         return {
+            optimizeDeps: {
+               ...optimizeDeps,
+               exclude,
+               esbuildOptions: {
+                  ...optimizeDeps.esbuildOptions,
+                  plugins: [
+                     ...(optimizeDeps.esbuildOptions?.plugins || []),
+                     {
+                        name: "vue-wswg-editor-virtual-modules",
+                        setup(build) {
+                           // Mark virtual modules as external during esbuild optimization
+                           build.onResolve({ filter: /^vue-wswg-editor:/ }, () => {
+                              return { external: true };
+                           });
+                        },
+                     },
+                  ],
+               },
+            },
+         };
+      },
+
       resolveId(id) {
          // Handle virtual module imports like "vue-wswg-editor:layouts"
          if (id.startsWith("vue-wswg-editor:")) {