vue-wswg-editor 0.0.11 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "vue-wswg-editor",
-   "version": "0.0.11",
+   "version": "0.0.13",
    "type": "module",
    "main": "./dist/vue-wswg-editor.es.js",
    "module": "./dist/vue-wswg-editor.es.js",
@@ -88,7 +88,6 @@
       "typescript": "~5.8.3",
       "vite": "^5.4.19",
       "vitepress": "^1.6.4",
-      "vitepress-demo-plugin": "^1.5.1",
       "vitest": "^2.1.9",
       "vue-tsc": "^2.2.12",
       "yup": "^1.7.1"

package/src/assets/styles/_mixins.scss

@@ -66,3 +66,18 @@
       content: none;
    }
 }
+
+// Apply Overlay Styles (Helper)
+// Applies the backdrop styles directly - useful when state classes are on parent
+// Uses CSS custom properties from .wswg-page-builder element
+// Usage: @include backdrop-apply($backdrop-color, $border-color);
+@mixin overlay-apply(
+   $backdrop-color: var(--block-backdrop-color, transparent),
+   $border-color: var(--block-border-color, #638ef1),
+   $border-width: var(--block-border-width, 4px),
+   $border-style: var(--block-border-style, solid)
+) {
+   outline: $border-width $border-style $border-color;
+   outline-offset: calc(-1 * var(--block-border-width, 2px));
+   box-shadow: inset 0 0 0 9999px $backdrop-color;
+}

package/src/components/AddBlockItem/AddBlockItem.vue

@@ -29,7 +29,7 @@
 <script setup lang="ts">
 import { computed, defineProps, ref } from "vue";
 import type { Block } from "../../types/Block";
-import { getBlockThumbnailUrl } from "../../util/registry";
+import { getBlockThumbnail } from "../../util/theme-registry";
 import { CubeTransparentIcon } from "@heroicons/vue/24/outline";
 
 const props = defineProps<{
@@ -38,13 +38,22 @@ const props = defineProps<{
 
 const thumbnailError = ref<boolean>(false);
 const thumbnailUrl = computed(() => {
-   return getBlockThumbnailUrl(props.block.directory);
+   return getBlockThumbnail(props.block.path);
 });
 
 function handleDragStart(event: DragEvent, block: Block) {
    if (!event.dataTransfer) return;
-   // Store the block type in dataTransfer
-   event.dataTransfer.setData("block-type", block.__name);
+   // Store the block type in dataTransfer (use block.type as fallback if __name not available)
+   const blockType = block.__name || block.type;
+   event.dataTransfer.setData("block-type", blockType);
    event.dataTransfer.effectAllowed = "move";
+   // Allow dragging to iframes
+   event.dataTransfer.setData("text/plain", blockType);
+
+   // Check if the dragged element has data-prevent-drop attribute
+   const draggedElement = event.target as HTMLElement;
+   if (draggedElement?.hasAttribute("data-prevent-drop")) {
+      event.dataTransfer.setData("prevent-drop", "true");
+   }
 }
 </script>

package/src/components/BlockBrowser/BlockBrowser.vue

@@ -28,15 +28,15 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
-import { pageBuilderBlocks } from "../../util/registry";
+import { themeBlocks } from "../../util/theme-registry";
 import AddBlockItem from "../AddBlockItem/AddBlockItem.vue";
 import type { Block } from "../../types/Block";
 import Sortable from "sortablejs";
 
 const blockSearch = ref("");
 const filteredBlocks = computed(() => {
-   if (!pageBuilderBlocks.value) return [];
-   return Object.values(pageBuilderBlocks.value).filter((block: Block) => {
+   if (!themeBlocks.value) return [];
+   return Object.values(themeBlocks.value).filter((block: Block) => {
       // against block name and label
       return (
          block.type?.toLowerCase().includes(blockSearch.value.toLowerCase()) ||
@@ -46,8 +46,8 @@ const filteredBlocks = computed(() => {
 });
 
 const blockCount = computed(() => {
-   if (!pageBuilderBlocks.value) return 0;
-   return Object.values(pageBuilderBlocks.value).length;
+   if (!themeBlocks.value) return 0;
+   return Object.values(themeBlocks.value).length;
 });
 
 function initSortable() {

package/src/components/BlockComponent/BlockComponent.vue

@@ -10,19 +10,19 @@
       :data-block-id="block.id"
    >
       <div
-         v-if="activeBlock?.id === block.id"
-         class="absolute -top-3 right-4 z-10 rounded-full bg-blue-500 px-2 py-1 text-xs text-white"
-      >
-         <p>Editing</p>
-      </div>
-      <div
-         v-if="pageBuilderBlocks[toCamelCase(block.type)]"
+         v-if="blockComponent"
          class="block-component"
          @mouseenter="emit('hoverBlock', block.id)"
          @mouseleave="emit('hoverBlock', null)"
          @click="emit('clickBlock', block)"
       >
-         <component :is="pageBuilderBlocks[toCamelCase(block.type)]" v-bind="block" ref="blockComponentRef" />
+         <div
+            v-if="activeBlock?.id === block.id"
+            class="editing-badge absolute right-2 top-2 z-40 rounded-full px-2 py-1 text-xs text-white"
+         >
+            <span>Editing</span>
+         </div>
+         <component :is="blockComponent" v-bind="block" ref="blockComponentRef" />
       </div>
       <div
          v-else
@@ -41,9 +41,8 @@
 </template>
 
 <script setup lang="ts">
-import { useTemplateRef } from "vue";
-import { onClickOutside } from "@vueuse/core";
-import { pageBuilderBlocks } from "../../util/registry";
+import { computed, useTemplateRef } from "vue";
+import { getBlock } from "../../util/theme-registry";
 import type { Block } from "../../types/Block";
 import { toCamelCase } from "../../util/helpers";
 import { onKeyStroke } from "@vueuse/core";
@@ -62,6 +61,10 @@ const props = defineProps<{
 
 const blockComponentRef = useTemplateRef<HTMLElement | null>("blockComponentRef");
 
+const blockComponent = computed<Block | undefined>(() => {
+   return getBlock(props.block.type) || 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>`
@@ -78,16 +81,6 @@ function getMarginClass(block: Block): string {
    return [getClass(top, "top"), getClass(bottom, "bottom")].join(" ");
 }
 
-// Click outside detection
-onClickOutside(
-   blockComponentRef,
-   () => {
-      // Unset active block
-      emit("clickBlock", null);
-   },
-   { ignore: ["#page-builder-sidebar", "#page-builder-resize-handle", "button"] }
-);
-
 // On escape key press
 onKeyStroke("Escape", () => {
    if (!props.activeBlock) return;
@@ -117,8 +110,8 @@ onKeyStroke("Escape", () => {
       font-weight: 500;
       color: #888017;
       content: "Spacing";
-      background-color: #f7efac;
-      border: 2px dashed #d2c564;
+      background-color: var(--margin-color, #faf6d5e0);
+      border: 2px dashed var(--margin-border-color, #cbc59c);
       border-radius: 7px;
       opacity: 0;
       transform: scaleY(0.9) scaleX(0.98);
@@ -128,32 +121,16 @@ onKeyStroke("Escape", () => {
    .block-component {
       position: relative;
       cursor: pointer;
+   }
 
-      // Highlight block overlay
-      &::before {
-         position: absolute;
-         top: 0;
-         left: 0;
-         z-index: 2;
-         width: 100%;
-         height: 100%;
-         pointer-events: none;
-         outline: 2px dashed #638ef1;
-         outline-offset: -2px;
-         content: "";
-         background-color: #9fd0f643;
-         opacity: 0;
-      }
+   .editing-badge {
+      background-color: var(--block-badge-color, #638ef1);
    }
 
-   // Active state
+   // Active state - apply overlay and show margin spacing
    &.active-block {
       .block-component {
-         &::before {
-            background-color: #9fd0f643;
-            border-color: #638ef1;
-            opacity: 1;
-         }
+         @include overlay-apply;
       }
 
       // Show the margin spacing overlay
@@ -163,14 +140,10 @@ onKeyStroke("Escape", () => {
       }
    }
 
-   // Hovered state
+   // Hovered state - apply overlay and show margin spacing
    &.hovered-block {
       .block-component {
-         &::before {
-            background-color: #9fd0f643;
-            border-color: #638ef1;
-            opacity: 1;
-         }
+         @include overlay-apply;
       }
 
       // Show the margin spacing overlay

package/src/components/BlockEditorFieldNode/BlockEditorFieldNode.vue

@@ -1,6 +1,6 @@
 <template>
    <!-- Field -->
-   <div class="editor-field-node" :class="{ 'border-red-500': validationErrorMessage }">
+   <div class="editor-field-node">
       <div class="mb-1 flex items-center gap-1.5">
          <!-- Label -->
          <label class="mr-auto text-sm font-medium first-letter:uppercase">
@@ -121,7 +121,7 @@
       <template v-else-if="fieldConfig.type === 'boolean'">
          <label
             :for="fieldName"
-            class="has-checked:bg-emerald-700 w-13 relative block h-7 cursor-pointer rounded-full bg-gray-300 transition-colors [-webkit-tap-highlight-color:transparent] hover:bg-gray-400/75"
+            class="has-checked:bg-emerald-700 w-13 relative block h-7 cursor-pointer rounded-full bg-gray-300 transition-colors [-webkit-tap-highlight-color:transparent] hover:bg-gray-400/75 has-[:checked]:hover:bg-emerald-800"
          >
             <input :id="fieldName" v-model="fieldValue" type="checkbox" class="peer sr-only" :disabled="!editable" />
 
@@ -177,8 +177,11 @@
       </template>
 
       <!-- Validation error message -->
-      <div v-if="validationErrorMessage" class="rounded-sm bg-red-50 p-2 px-3 text-xs text-red-600">
-         {{ validationErrorMessage }}
+      <div
+         v-if="validationError && typeof validationError === 'string'"
+         class="rounded-sm bg-red-50 p-2 px-3 text-xs text-red-600"
+      >
+         {{ validationError }}
       </div>
    </div>
 </template>
@@ -191,7 +194,7 @@ import BlockMarginNode from "../BlockMarginFieldNode/BlockMarginNode.vue";
 import BlockImageNode from "../BlockImageFieldNode/BlockImageNode.vue";
 import BlockEditorFields from "../BlockEditorFields/BlockEditorFields.vue";
 import { InformationCircleIcon } from "@heroicons/vue/24/outline";
-import { validateField as validateFieldUtil } from "../../util/validation";
+import { validateField as validateFieldUtil, type ValidationResult } from "../../util/validation";
 import * as yup from "yup";
 
 const fieldValue = defineModel<any>();
@@ -202,7 +205,7 @@ const props = defineProps<{
    editable: boolean;
 }>();
 
-const validationErrorMessage = ref<string | null>(null);
+const validationError = ref<string | null | ValidationResult>(null);
 
 // Computed property for checkbox values (array of selected values)
 const checkboxValues = computed({
@@ -301,21 +304,20 @@ async function validateField(): Promise<void> {
       const result = await validateFieldUtil(fieldValue.value, props.fieldConfig);
       // True = valid, false = invalid, string = error message
       if (result === true) {
-         validationErrorMessage.value = null;
+         validationError.value = null;
       } else {
          // result is either false or a string error message
          // TODO: i18n
-         validationErrorMessage.value = result === false ? "Field is invalid" : result;
+         validationError.value = result === false ? "Field is invalid" : result;
       }
    } catch (error) {
       const validationErrorsList = error as yup.ValidationError;
-      validationErrorMessage.value = validationErrorsList.errors[0] || "Field is invalid";
+      validationError.value = validationErrorsList.errors[0] || "Field is invalid";
    }
 }
 
 function clearFieldValue(): void {
    fieldValue.value = null;
-   validationErrorMessage.value = null;
 }
 
 // Watch the field value and validate it

package/src/components/BlockEditorFields/BlockEditorFields.vue

@@ -3,7 +3,7 @@
       <!-- Field group tabs-->
       <div
          v-if="editorFieldGroups.length"
-         class="field-group-tabs flex gap-2 border-b border-gray-300"
+         class="field-group-tabs flex gap-2 overflow-x-auto border-b border-gray-300"
          :class="nested ? 'px-0 pt-0' : 'px-5 pt-3'"
       >
          <button
@@ -51,11 +51,12 @@ import type { EditorFieldConfig } from "../../util/fieldConfig";
 
 const blockData = defineModel<any>();
 const activeFieldGroup = ref<string>("");
-const { fields, editable } = defineProps<{
+const { fields, editable, activeTab } = defineProps<{
    fields?: Record<string, EditorFieldConfig>;
    editable: boolean;
    isLayoutBlock?: boolean;
    nested?: boolean;
+   activeTab?: string;
 }>();
 
 const editorFields = computed(() => {
@@ -88,13 +89,32 @@ const editorFieldGroups = computed(() => {
 
 watch(editorFieldGroups, () => {
    if (editorFieldGroups.value.length > 0) {
-      activeFieldGroup.value = editorFieldGroups.value[0] || "";
+      // If activeTab prop is provided and exists in groups, use it; otherwise use first group
+      if (activeTab && editorFieldGroups.value.includes(activeTab)) {
+         activeFieldGroup.value = activeTab;
+      } else {
+         activeFieldGroup.value = editorFieldGroups.value[0] || "";
+      }
    }
 });
 
+watch(
+   () => activeTab,
+   (newTab) => {
+      if (newTab && editorFieldGroups.value.includes(newTab)) {
+         activeFieldGroup.value = newTab;
+      }
+   }
+);
+
 onBeforeMount(() => {
    if (editorFieldGroups.value.length > 0) {
-      activeFieldGroup.value = editorFieldGroups.value[0] || "";
+      // If activeTab prop is provided and exists in groups, use it; otherwise use first group
+      if (activeTab && editorFieldGroups.value.includes(activeTab)) {
+         activeFieldGroup.value = activeTab;
+      } else {
+         activeFieldGroup.value = editorFieldGroups.value[0] || "";
+      }
    }
 });
 </script>

package/src/components/BlockRepeaterFieldNode/BlockRepeaterNode.vue

@@ -127,10 +127,15 @@ const openRepeaterItems = ref<string[]>([]);
 
 // Ensure fieldValue is always an array with id attribute
 onBeforeMount(() => {
-   fieldValue.value = fieldValue.value.map((item) => ({
-      id: item.id || crypto.randomUUID(),
-      ...item,
-   }));
+   // Ensure fieldValue is an array before calling map
+   if (!Array.isArray(fieldValue.value)) {
+      fieldValue.value = [];
+   }
+   fieldValue.value =
+      fieldValue.value?.map((item) => ({
+         id: item.id || crypto.randomUUID(),
+         ...item,
+      })) ?? [];
 });
 
 function addItem() {

package/src/components/BrowserNavigation/BrowserNavigation.vue

@@ -1,7 +1,7 @@
 <template>
    <!-- URL bar -->
    <div class="browser-navigation-bar">
-      <div class="flex items-center justify-between rounded-t-lg bg-zinc-600 px-5 py-4">
+      <div class="flex items-center justify-between bg-zinc-600 px-5 py-4">
          <div class="flex w-full items-center gap-2 rounded-md bg-zinc-700 px-4 py-1.5 text-sm text-zinc-300">
             <span class="block flex-1 truncate">{{ url }}</span>