vue-wswg-editor 0.0.10 → 0.0.11

package/package.json

@@ -1,15 +1,16 @@
 {
    "name": "vue-wswg-editor",
-   "version": "0.0.10",
+   "version": "0.0.11",
    "type": "module",
-   "main": "src/index.ts",
-   "module": "src/index.ts",
-   "typings": "src/index.ts",
+   "main": "./dist/vue-wswg-editor.es.js",
+   "module": "./dist/vue-wswg-editor.es.js",
+   "typings": "./dist/types/index.d.ts",
+   "types": "./dist/types/index.d.ts",
    "exports": {
       ".": {
-         "import": "./src/index.ts",
-         "require": "./src/index.ts",
-         "types": "./src/index.ts"
+         "import": "./dist/vue-wswg-editor.es.js",
+         "require": "./dist/vue-wswg-editor.es.js",
+         "types": "./dist/types/index.d.ts"
       },
       "./PageRenderer": {
          "import": "./src/components/PageRenderer/PageRenderer.vue",
@@ -24,12 +25,16 @@
    },
    "files": [
       "dist",
-      "src"
+      "src",
+      "types"
    ],
    "scripts": {
       "dev": "concurrently \"vite build --watch\" \"vite build --config vite-plugin.config.ts --watch\"",
       "build": "vite build && vite build --config vite-plugin.config.ts && vue-tsc --declaration --emitDeclarationOnly",
       "preview": "vite preview",
+      "docs:dev": "vitepress dev docs",
+      "docs:build": "vitepress build docs",
+      "docs:preview": "vitepress preview docs",
       "test:unit": "vitest",
       "test:unit:ui": "vitest --ui",
       "test:unit:ci": "vitest run",
@@ -82,6 +87,8 @@
       "tailwindcss": "^3.4.10",
       "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

@@ -3,64 +3,59 @@
 // Usage: @include block-margin-classes;
 
 @mixin block-margin-classes {
-   // Margin size variables
-   $sm-size: 2rem;
-   $md-size: 4rem;
-   $lg-size: 6rem;
-
    // Top margin classes
    &.margin-top-sm {
-      padding-top: $sm-size;
+      padding-top: var(--block-margin-sm, 2rem);
 
       &::before {
          top: 0;
-         height: $sm-size;
+         height: var(--block-margin-sm, 2rem);
       }
    }
 
    &.margin-top-md {
-      padding-top: $md-size;
+      padding-top: var(--block-margin-md, 4rem);
 
       &::before {
          top: 0;
-         height: $md-size;
+         height: var(--block-margin-md, 4rem);
       }
    }
 
    &.margin-top-lg {
-      padding-top: $lg-size;
+      padding-top: var(--block-margin-lg, 6rem);
 
       &::before {
          top: 0;
-         height: $lg-size;
+         height: var(--block-margin-lg, 6rem);
       }
    }
 
    // Bottom margin classes
    &.margin-bottom-sm {
-      padding-bottom: $sm-size;
+      padding-bottom: var(--block-margin-sm, 2rem);
 
       &::after {
          bottom: 0;
-         height: $sm-size;
+         height: var(--block-margin-sm, 2rem);
       }
    }
 
    &.margin-bottom-md {
-      padding-bottom: $md-size;
+      padding-bottom: var(--block-margin-md, 4rem);
 
       &::after {
          bottom: 0;
-         height: $md-size;
+         height: var(--block-margin-md, 4rem);
       }
    }
 
    &.margin-bottom-lg {
-      padding-bottom: $lg-size;
+      padding-bottom: var(--block-margin-lg, 6rem);
 
       &::after {
          bottom: 0;
-         height: $lg-size;
+         height: var(--block-margin-lg, 6rem);
       }
    }
 

package/src/components/BlockEditorFieldNode/BlockEditorFieldNode.vue

@@ -62,7 +62,9 @@
 
       <!-- Range input -->
       <div v-else-if="fieldConfig.type === 'range'" class="flex items-center gap-2">
-         <span class="rounded-full bg-zinc-100 px-2 py-1 text-sm font-bold text-zinc-600">{{ fieldValue }}</span>
+         <span class="rounded-full bg-zinc-100 px-2 py-1 text-sm font-bold text-zinc-600"
+            >{{ fieldValue }}{{ fieldConfig.valueSuffix || "" }}</span
+         >
          <input
             v-model="fieldValue"
             type="range"
@@ -139,6 +141,23 @@
          />
       </div>
 
+      <!-- Object Input -->
+      <div v-else-if="fieldConfig.type === 'object' && fieldConfig.objectFields">
+         <div class="mt-3 border-t border-gray-300 pt-3">
+            <BlockEditorFields
+               v-model="objectFieldValue"
+               :fields="fieldConfig.objectFields"
+               :editable="editable"
+               :nested="true"
+            />
+         </div>
+      </div>
+
+      <!-- Image -->
+      <div v-else-if="fieldConfig.type === 'image'">
+         <BlockImageNode v-model="fieldValue" :fieldConfig="fieldConfig" :fieldName="fieldName" :editable="editable" />
+      </div>
+
       <!-- Margin -->
       <div v-else-if="fieldConfig.type === 'margin'">
          <BlockMarginNode v-model="fieldValue" :fieldConfig="fieldConfig" :fieldName="fieldName" :editable="editable" />
@@ -169,7 +188,10 @@ import { ref, computed, watch } from "vue";
 import type { EditorFieldConfig } from "../../util/fieldConfig";
 import BlockRepeaterNode from "../BlockRepeaterFieldNode/BlockRepeaterNode.vue";
 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 * as yup from "yup";
 
 const fieldValue = defineModel<any>();
@@ -202,6 +224,20 @@ const checkboxValues = computed({
    },
 });
 
+// Computed property for object field values - ensure it's always an object
+const objectFieldValue = computed({
+   get: () => {
+      // Ensure fieldValue is always an object for object fields
+      if (typeof fieldValue.value !== "object" || fieldValue.value === null || Array.isArray(fieldValue.value)) {
+         return {};
+      }
+      return fieldValue.value;
+   },
+   set: (newValue: Record<string, any>) => {
+      fieldValue.value = newValue;
+   },
+});
+
 // Computed property to handle object/array conversion for text inputs
 const textFieldValue = computed({
    get: () => {
@@ -257,12 +293,12 @@ const canClearFieldValue = computed(() => {
  * minItems // For repeater fields
  * maxItems // For repeater fields
  * required // For all fields
+ * validator // Custom validation function
  */
 
 async function validateField(): Promise<void> {
-   if (!props.fieldConfig.validator) return;
    try {
-      const result = await props.fieldConfig.validator(fieldValue.value);
+      const result = await validateFieldUtil(fieldValue.value, props.fieldConfig);
       // True = valid, false = invalid, string = error message
       if (result === true) {
          validationErrorMessage.value = null;
@@ -280,7 +316,6 @@ async function validateField(): Promise<void> {
 function clearFieldValue(): void {
    fieldValue.value = null;
    validationErrorMessage.value = null;
-   //    validateField();
 }
 
 // Watch the field value and validate it

package/src/components/BlockEditorFields/BlockEditorFields.vue

@@ -1,7 +1,11 @@
 <template>
    <div class="section-editor-fields">
       <!-- Field group tabs-->
-      <div v-if="editorFieldGroups.length" class="field-group-tabs flex gap-2 border-b border-gray-300 px-5 pt-3">
+      <div
+         v-if="editorFieldGroups.length"
+         class="field-group-tabs flex gap-2 border-b border-gray-300"
+         :class="nested ? 'px-0 pt-0' : 'px-5 pt-3'"
+      >
          <button
             v-for="fieldGroupName in editorFieldGroups"
             :key="`fg_${fieldGroupName}`"
@@ -14,7 +18,11 @@
       </div>
 
       <!-- Fields -->
-      <div v-if="blockData && Object.keys(editorFields).length > 0" class="flex flex-col gap-3 p-5">
+      <div
+         v-if="blockData && Object.keys(editorFields).length > 0"
+         class="flex flex-col gap-3"
+         :class="nested ? 'p-0' : 'p-5'"
+      >
          <div v-for="(fieldConfig, fieldName) in editorFields" :key="fieldName" class="prop-field">
             <BlockEditorFieldNode
                v-model="blockData[fieldName]"
@@ -26,7 +34,7 @@
       </div>
 
       <!-- No fields -->
-      <div v-else class="p-5">
+      <div v-else :class="nested ? 'p-0' : 'p-5'">
          <div class="rounded-lg bg-zinc-100 px-4 py-3 text-sm font-medium text-zinc-600">
             <p>
                {{ isLayoutBlock ? "No settings available for this layout." : "No options available for this block." }}
@@ -47,6 +55,7 @@ const { fields, editable } = defineProps<{
    fields?: Record<string, EditorFieldConfig>;
    editable: boolean;
    isLayoutBlock?: boolean;
+   nested?: boolean;
 }>();
 
 const editorFields = computed(() => {

package/src/components/BlockImageFieldNode/BlockImageNode.vue

@@ -0,0 +1,373 @@
+<template>
+   <div class="image-upload-field mb-2">
+      <!-- Image Preview with Upload Area (Compact Layout) -->
+      <div
+         v-if="imageUrl && editable"
+         class="flex gap-2"
+         @dragover.prevent="handleDragOver"
+         @dragleave.prevent="handleDragLeave"
+         @drop.prevent="handleDrop"
+      >
+         <!-- Hidden file input -->
+         <input
+            ref="fileInputRef"
+            type="file"
+            accept="image/*"
+            class="sr-only"
+            :disabled="isUploading || !editable"
+            @change="handleFileSelect"
+         />
+
+         <!-- Thumbnail Preview -->
+         <div class="relative shrink-0">
+            <img :src="imageUrl" alt="Uploaded image" class="size-16 rounded border border-gray-300 object-cover" />
+            <button
+               type="button"
+               class="absolute -right-1 -top-1 rounded-full bg-red-500 p-0.5 text-white shadow-sm hover:bg-red-600"
+               title="Remove image"
+               @click.stop="removeImage"
+            >
+               <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="2.5"
+                  stroke="currentColor"
+                  class="size-3"
+               >
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+               </svg>
+            </button>
+         </div>
+
+         <!-- Upload Button -->
+         <button
+            type="button"
+            :class="[
+               'flex-1rounded w-full rounded border px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors',
+               isUploading && 'pointer-events-none opacity-50',
+               isDragging && 'border-blue-500 bg-blue-50',
+               !isDragging && 'border-gray-300 bg-white hover:bg-gray-50',
+            ]"
+            @click="triggerFileInput"
+            @dragover.prevent="handleDragOver"
+            @dragleave.prevent="handleDragLeave"
+            @drop.prevent="handleDrop"
+         >
+            <span v-if="!isUploading" class="flex items-center justify-center gap-1.5">
+               <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="size-3.5"
+               >
+                  <path
+                     stroke-linecap="round"
+                     stroke-linejoin="round"
+                     d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+                  />
+               </svg>
+               Replace image
+            </span>
+            <span v-else class="flex items-center justify-center gap-1.5">
+               <svg
+                  class="size-3.5 animate-spin text-blue-500"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+               >
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path
+                     class="opacity-75"
+                     fill="currentColor"
+                     d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+               </svg>
+               Uploading...
+            </span>
+         </button>
+      </div>
+
+      <!-- Upload Area (No Image) -->
+      <div
+         v-else-if="editable"
+         :class="[
+            'relative cursor-pointer rounded border border-dashed transition-colors',
+            isDragging
+               ? 'border-blue-500 bg-blue-50'
+               : 'border-gray-300 bg-gray-50 hover:border-gray-400 hover:bg-gray-100',
+            isUploading && 'pointer-events-none opacity-50',
+         ]"
+         @click="triggerFileInput"
+         @dragover.prevent="handleDragOver"
+         @dragleave.prevent="handleDragLeave"
+         @drop.prevent="handleDrop"
+      >
+         <input
+            ref="fileInputRef"
+            type="file"
+            accept="image/*"
+            class="sr-only"
+            :disabled="isUploading || !editable"
+            @change="handleFileSelect"
+         />
+
+         <div class="flex items-center justify-center gap-2 p-3">
+            <!-- Upload Icon -->
+            <svg
+               v-if="!isUploading"
+               xmlns="http://www.w3.org/2000/svg"
+               fill="none"
+               viewBox="0 0 24 24"
+               stroke-width="1.5"
+               stroke="currentColor"
+               class="size-4 text-gray-400"
+            >
+               <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+               />
+            </svg>
+
+            <!-- Loading Spinner -->
+            <svg
+               v-else
+               class="size-4 animate-spin text-blue-500"
+               xmlns="http://www.w3.org/2000/svg"
+               fill="none"
+               viewBox="0 0 24 24"
+            >
+               <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+               <path
+                  class="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+               ></path>
+            </svg>
+
+            <!-- Upload Text -->
+            <span v-if="!isUploading" class="text-xs font-medium text-gray-700">Click to upload image</span>
+            <span v-else class="text-xs font-medium text-blue-600">Uploading...</span>
+         </div>
+      </div>
+
+      <!-- Read-only display -->
+      <div v-else-if="imageUrl" class="flex items-center gap-2">
+         <img :src="imageUrl" alt="Image" class="size-16 rounded border border-gray-300 object-cover" />
+         <span class="text-xs text-gray-500">Image uploaded</span>
+      </div>
+      <div v-else class="rounded border border-gray-200 bg-gray-50 p-2 text-center text-xs text-gray-400">No image</div>
+
+      <!-- Error Message -->
+      <div v-if="errorMessage" class="mt-1.5 rounded bg-red-50 px-2 py-1 text-xs text-red-600">
+         {{ errorMessage }}
+      </div>
+   </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+interface Props {
+   modelValue?: string | null;
+   editable?: boolean;
+   uploadUrl?: string; // Optional: custom upload endpoint URL
+   maxSizeMB?: number; // Maximum file size in MB
+   acceptedTypes?: string[]; // Accepted MIME types
+}
+
+const props = withDefaults(defineProps<Props>(), {
+   modelValue: null,
+   editable: true,
+   uploadUrl: undefined,
+   maxSizeMB: 10,
+   acceptedTypes: () => ["image/jpeg", "image/jpg", "image/png", "image/gif", "image/webp"],
+});
+
+const emit = defineEmits<{
+   "update:modelValue": [value: string | null];
+}>();
+
+const fileInputRef = ref<HTMLInputElement | null>(null);
+const imageUrl = ref<string | null>(props.modelValue || null);
+const isUploading = ref(false);
+const isDragging = ref(false);
+const errorMessage = ref<string | null>(null);
+const selectedFile = ref<File | null>(null);
+
+// Watch for external changes to modelValue
+watch(
+   () => props.modelValue,
+   (newValue) => {
+      imageUrl.value = newValue || null;
+   }
+);
+
+// Watch for internal changes and emit updates
+watch(imageUrl, (newValue) => {
+   emit("update:modelValue", newValue);
+});
+
+function triggerFileInput() {
+   if (!props.editable || isUploading.value) return;
+   fileInputRef.value?.click();
+}
+
+function handleFileSelect(event: Event) {
+   const target = event.target as HTMLInputElement;
+   const file = target.files?.[0];
+   if (file) {
+      processFile(file);
+   }
+}
+
+function handleDragOver(event: DragEvent) {
+   if (!props.editable || isUploading.value) return;
+   event.preventDefault();
+   isDragging.value = true;
+}
+
+function handleDragLeave() {
+   isDragging.value = false;
+}
+
+function handleDrop(event: DragEvent) {
+   if (!props.editable || isUploading.value) return;
+   event.preventDefault();
+   isDragging.value = false;
+
+   const file = event.dataTransfer?.files[0];
+   if (file) {
+      processFile(file);
+   }
+}
+
+function validateFile(file: File): boolean {
+   errorMessage.value = null;
+
+   // Check file type
+   if (!props.acceptedTypes.includes(file.type)) {
+      errorMessage.value = `File type not supported. Accepted types: ${props.acceptedTypes.join(", ")}`;
+      return false;
+   }
+
+   // Check file size
+   const fileSizeMB = file.size / (1024 * 1024);
+   if (fileSizeMB > props.maxSizeMB) {
+      errorMessage.value = `File size exceeds ${props.maxSizeMB}MB limit`;
+      return false;
+   }
+
+   return true;
+}
+
+async function processFile(file: File) {
+   if (!validateFile(file)) {
+      return;
+   }
+
+   selectedFile.value = file;
+   isUploading.value = true;
+   errorMessage.value = null;
+
+   try {
+      // Create preview URL immediately
+      const previewUrl = URL.createObjectURL(file);
+      imageUrl.value = previewUrl;
+
+      // Upload the file
+      const uploadedUrl = await uploadFile(file);
+
+      // Replace preview URL with uploaded URL
+      if (uploadedUrl) {
+         // Clean up preview URL
+         URL.revokeObjectURL(previewUrl);
+         imageUrl.value = uploadedUrl;
+      } else {
+         // If upload fails, keep preview URL but show error
+         errorMessage.value = "Upload failed. Please try again.";
+      }
+   } catch (error) {
+      console.error("File upload error:", error);
+      errorMessage.value = error instanceof Error ? error.message : "Upload failed. Please try again.";
+      // Keep preview URL on error
+   } finally {
+      isUploading.value = false;
+      // Reset file input
+      if (fileInputRef.value) {
+         fileInputRef.value.value = "";
+      }
+   }
+}
+
+async function uploadFile(file: File): Promise<string | null> {
+   // If a custom upload URL is provided, use it
+   if (props.uploadUrl) {
+      return uploadToCustomEndpoint(file, props.uploadUrl);
+   }
+
+   // Default implementation: Create a data URL (for basic use cases)
+   // In production, you should replace this with actual API call
+   return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+         const result = e.target?.result as string;
+         resolve(result);
+      };
+      reader.onerror = () => {
+         resolve(null);
+      };
+      reader.readAsDataURL(file);
+   });
+}
+
+async function uploadToCustomEndpoint(file: File, endpoint: string): Promise<string | null> {
+   try {
+      const formData = new FormData();
+      formData.append("file", file);
+
+      const response = await fetch(endpoint, {
+         method: "POST",
+         body: formData,
+      });
+
+      if (!response.ok) {
+         throw new Error(`Upload failed: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      // Expect response to have a 'url' property
+      return data.url || data.imageUrl || data.path || null;
+   } catch (error) {
+      console.error("Custom upload error:", error);
+      throw error;
+   }
+}
+
+function removeImage() {
+   if (!props.editable || isUploading.value) return;
+
+   // Clean up object URL if it's a preview
+   if (imageUrl.value && imageUrl.value.startsWith("blob:")) {
+      URL.revokeObjectURL(imageUrl.value);
+   }
+
+   imageUrl.value = null;
+   selectedFile.value = null;
+   errorMessage.value = null;
+
+   // Reset file input
+   if (fileInputRef.value) {
+      fileInputRef.value.value = "";
+   }
+}
+</script>
+
+<style scoped>
+.image-upload-field {
+   width: 100%;
+}
+</style>

package/src/components/PageBuilderSidebar/PageBuilderSidebar.vue

@@ -1,5 +1,5 @@
 <template>
-   <div id="page-builder-sidebar" class="page-builder-sidebar">
+   <div class="page-builder-sidebar">
       <!-- Toolbar -->
       <PageBuilderToolbar
          v-model:editorViewport="editorViewport"
@@ -256,9 +256,5 @@ $toolbar-height: 0px;
 .page-builder-sidebar {
    min-width: 300px;
    background: #fff;
-
-   // position: sticky;
-   // top: 0;
-   // z-index: 12;
 }
 </style>