vue-wswg-editor 0.0.9 → 0.0.11

package/package.json

@@ -1,15 +1,16 @@
 {
    "name": "vue-wswg-editor",
-   "version": "0.0.9",
+   "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/AddBlockItem/AddBlockItem.vue

@@ -2,7 +2,7 @@
    <div
       :data-block-type="block.type"
       draggable="true"
-      class="cursor-pointer rounded-md border bg-zinc-50 p-3 text-sm text-zinc-900 hover:border-zinc-400 hover:text-zinc-900"
+      class="cursor-pointer rounded-md border border-gray-300 bg-zinc-50 p-2 text-sm text-zinc-900 hover:border-zinc-400 hover:text-zinc-900"
       @dragstart="(event) => handleDragStart(event, block)"
    >
       <!-- thumbnail image -->
@@ -14,15 +14,15 @@
             @error="thumbnailError = true"
          />
       </div>
-      <!-- icon -->
-      <div v-else-if="block.icon" class="mb-2 flex h-28 w-full items-center justify-center rounded-md bg-zinc-200">
-         <span>Icon: {{ block.icon }}</span>
+      <!-- emoji -->
+      <div v-else-if="block.emoji" class="mb-2 flex h-28 w-full items-center justify-center rounded-md bg-zinc-200">
+         <span class="text-2xl">{{ block.emoji }}</span>
       </div>
       <!-- placeholder -->
       <div v-else class="mb-2 flex h-28 w-full items-center justify-center rounded-md bg-zinc-200">
          <CubeTransparentIcon class="size-6 text-zinc-400" />
       </div>
-      <p class="font-bold">{{ block.label }}</p>
+      <p class="text-sm">{{ block.label }}</p>
    </div>
 </template>
 

package/src/components/BlockBrowser/BlockBrowser.vue

@@ -1,7 +1,12 @@
 <template>
    <div class="block-browser">
-      <div class="block-browser-header border-b bg-white px-5 py-3">
-         <input v-model="blockSearch" type="text" placeholder="Search blocks" class="form-control" />
+      <div class="block-browser-header border-b border-gray-300 bg-white px-5 py-3">
+         <input
+            v-model="blockSearch"
+            type="text"
+            placeholder="Search blocks"
+            class="w-full rounded-md border border-gray-300 p-2"
+         />
       </div>
       <div v-if="!blockCount" class="p-5 text-center text-sm text-zinc-500">
          <p>Create your first block to get started.</p>
@@ -15,7 +20,7 @@
          </p>
       </div>
       <div v-else-if="!filteredBlocks.length" class="p-5 text-center text-sm text-zinc-500">No blocks found</div>
-      <div v-else id="available-blocks-list" class="grid grid-cols-1 gap-3 p-5">
+      <div v-else id="available-blocks-list" class="available-blocks-grid">
          <AddBlockItem v-for="block in filteredBlocks" :key="block.type" :block="block" />
       </div>
    </div>
@@ -67,3 +72,28 @@ onMounted(() => {
    initSortable();
 });
 </script>
+
+<style scoped>
+.block-browser {
+   container-type: inline-size;
+}
+
+.available-blocks-grid {
+   display: grid;
+   grid-template-columns: 1fr;
+   gap: 0.75rem;
+   padding: 1.25rem;
+}
+
+@container (min-width: 360px) {
+   .available-blocks-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+   }
+}
+
+@container (min-width: 560px) {
+   .available-blocks-grid {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+   }
+}
+</style>

package/src/components/BlockEditorFieldNode/BlockEditorFieldNode.vue

@@ -16,7 +16,11 @@
             <span>Clear</span>
          </div>
          <!-- Description -->
-         <div v-if="fieldConfig.description" :title="fieldConfig.description" class="cursor-default">
+         <div
+            v-if="fieldConfig.description && fieldConfig.type !== 'info'"
+            :title="fieldConfig.description"
+            class="cursor-default"
+         >
             <InformationCircleIcon class="size-4 text-zinc-500" />
          </div>
       </div>
@@ -58,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"
@@ -75,14 +81,14 @@
          <label
             v-for="option in fieldConfig.options"
             :key="`${fieldName}_${option.value}`"
-            class="flex cursor-pointer items-center gap-2 rounded-md border p-2"
+            class="flex cursor-pointer items-center gap-2 rounded-md border border-gray-300 p-2"
          >
             <input
                :id="`${fieldName}_${option.value}`"
                v-model="checkboxValues"
                :value="option.value"
                type="checkbox"
-               class="form-control"
+               class="form-control appearance-none"
                :disabled="!editable"
             />
             <span class="text-sm">{{ option.label }}</span>
@@ -91,39 +97,37 @@
 
       <!-- Radio -->
       <div v-else-if="fieldConfig.type === 'radio'" class="form-control flex flex-col gap-2">
-         <label
-            v-for="option in fieldConfig.options"
-            :key="`${fieldName}_${option.value}`"
-            class="flex cursor-pointer items-center gap-2 rounded-md border p-2"
-         >
-            <input
-               :id="`${fieldName}_${option.value}`"
-               v-model="fieldValue"
-               :value="option.value"
-               type="radio"
-               class="form-control"
-               :disabled="!editable"
-            />
-            <span class="text-sm">{{ option.label }}</span>
-         </label>
+         <div v-for="option in fieldConfig.options" :key="`${fieldName}_${option.value}`">
+            <label
+               :for="`${fieldName}_${option.value}`"
+               class="has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600 flex cursor-pointer items-center justify-between gap-4 rounded border border-gray-300 bg-white p-3 text-sm font-medium shadow-sm transition-colors hover:bg-gray-50"
+            >
+               <p class="text-gray-700">{{ option.label }}</p>
+
+               <input
+                  :id="`${fieldName}_${option.value}`"
+                  v-model="fieldValue"
+                  type="radio"
+                  :name="fieldName"
+                  class="sr-only"
+                  :value="option.value"
+                  :checked="fieldValue === option.value"
+               />
+            </label>
+         </div>
       </div>
 
       <!-- Boolean toggle -->
       <template v-else-if="fieldConfig.type === 'boolean'">
          <label
-            tabindex="0"
-            class="group inline-flex h-7 w-14 cursor-pointer items-center gap-2 rounded-full p-1 transition-all duration-200"
-            :class="!!fieldValue ? 'bg-emerald-700 hover:bg-emerald-800' : 'bg-zinc-200 hover:bg-zinc-300'"
+            :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"
          >
-            <input
-               :id="fieldName"
-               v-model="fieldValue"
-               tabindex="-1"
-               type="checkbox"
-               class="ml-0 size-5 cursor-pointer rounded-full !border-none !bg-white !outline-none !ring-0 !ring-offset-0 transition-all duration-200 checked:ml-7"
-               :disabled="!editable"
-            />
-            <span class="hidden text-sm">{{ fieldConfig.label }}</span>
+            <input :id="fieldName" v-model="fieldValue" type="checkbox" class="peer sr-only" :disabled="!editable" />
+
+            <span
+               class="absolute inset-y-0 start-0 m-1 size-5 rounded-full bg-white transition-[inset-inline-start] peer-checked:start-6"
+            ></span>
          </label>
       </template>
 
@@ -137,11 +141,36 @@
          />
       </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" />
       </div>
 
+      <!-- Info -->
+      <template v-else-if="fieldConfig.type === 'info'">
+         <div class="font-base mt-1 rounded-md bg-zinc-100 p-2 text-sm text-zinc-600 md:p-3">
+            <InformationCircleIcon class="float-left mr-1 mt-0.5 inline-block size-4" />
+            {{ fieldConfig.description }}
+         </div>
+      </template>
+
       <!-- Default fallback -->
       <template v-else>
          <input v-model="textFieldValue" type="text" class="form-control" :disabled="!editable" />
@@ -159,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>();
@@ -192,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: () => {
@@ -247,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;
@@ -270,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 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,8 +34,8 @@
       </div>
 
       <!-- No fields -->
-      <div v-else class="p-5">
-         <div class="rounded-lg bg-zinc-100 px-4 py-3 text-sm font-bold text-zinc-500">
+      <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." }}
             </p>
@@ -47,6 +55,7 @@ const { fields, editable } = defineProps<{
    fields?: Record<string, EditorFieldConfig>;
    editable: boolean;
    isLayoutBlock?: boolean;
+   nested?: boolean;
 }>();
 
 const editorFields = computed(() => {
@@ -79,13 +88,13 @@ const editorFieldGroups = computed(() => {
 
 watch(editorFieldGroups, () => {
    if (editorFieldGroups.value.length > 0) {
-      activeFieldGroup.value = editorFieldGroups.value[0];
+      activeFieldGroup.value = editorFieldGroups.value[0] || "";
    }
 });
 
 onBeforeMount(() => {
    if (editorFieldGroups.value.length > 0) {
-      activeFieldGroup.value = editorFieldGroups.value[0];
+      activeFieldGroup.value = editorFieldGroups.value[0] || "";
    }
 });
 </script>