vue-wswg-editor 0.0.1

package/package.json

@@ -0,0 +1,85 @@
+{
+   "name": "vue-wswg-editor",
+   "version": "0.0.1",
+   "type": "module",
+   "main": "src/index.ts",
+   "module": "src/index.ts",
+   "typings": "src/index.ts",
+   "exports": {
+      ".": {
+         "import": "./src/index.ts",
+         "require": "./src/index.ts",
+         "types": "./src/index.ts"
+      },
+      "./PageRenderer": {
+         "import": "./src/components/PageRenderer/PageRenderer.vue",
+         "types": "./src/components/PageRenderer/PageRenderer.vue"
+      },
+      "./style.css": "./dist/style.css"
+   },
+   "files": [
+      "dist",
+      "src"
+   ],
+   "scripts": {
+      "dev": "vite build --watch",
+      "build": "vite build && vue-tsc --declaration --emitDeclarationOnly",
+      "preview": "vite preview",
+      "test:unit": "vitest",
+      "test:unit:ui": "vitest --ui",
+      "test:unit:ci": "vitest run",
+      "--PROJECT--": "",
+      "tscheck": "vue-tsc --build --force",
+      "prettier": "prettier --check .",
+      "prettier-fix": "prettier . --write",
+      "lint": "eslint . --quiet",
+      "lint-fix": "npm run lint --fix --quiet",
+      "stylelint": "stylelint \"src/**/*.css\" \"**/*.scss\" \"**/*.vue\"",
+      "stylelint-fix": "stylelint \"src/**/*.css\" \"**/*.scss\" \"**/*.vue\" --fix",
+      "format": "npm run tscheck && npm run prettier && npm run lint && npm run stylelint",
+      "format-fix": "npm run tscheck && npm run prettier-fix && npm run lint-fix && npm run stylelint-fix"
+   },
+   "dependencies": {
+      "@headlessui/vue": "^1.7.23",
+      "@heroicons/vue": "^2.2.0",
+      "@vueuse/core": "^14.0.0",
+      "sortablejs": "^1.15.6",
+      "vue": "^3.4.0"
+   },
+   "devDependencies": {
+      "@types/jsdom": "^21.1.7",
+      "@types/node": "^24.0.8",
+      "@types/sortablejs": "^1.15.9",
+      "@vitejs/plugin-vue": "^5.2.4",
+      "@vitest/eslint-plugin": "^1.3.5",
+      "@vitest/ui": "^2.1.9",
+      "@vue/eslint-config-prettier": "^10.2.0",
+      "@vue/eslint-config-typescript": "^14.5.1",
+      "@vue/test-utils": "^2.4.6",
+      "@vue/tsconfig": "^0.7.0",
+      "autoprefixer": "^10.4.21",
+      "eslint": "^9.30.0",
+      "eslint-plugin-tailwindcss": "^3.18.2",
+      "eslint-plugin-vue": "^9.33.0",
+      "jsdom": "^26.1.0",
+      "postcss": "^8.5.6",
+      "postcss-import": "^16.1.0",
+      "postcss-scss": "^4.0.9",
+      "prettier": "^3.6.2",
+      "sass": "^1.89.2",
+      "stylelint": "^16.21.0",
+      "stylelint-config-recess-order": "^7.1.0",
+      "stylelint-config-standard": "^38.0.0",
+      "stylelint-config-standard-scss": "^15.0.1",
+      "stylelint-config-standard-vue": "^1.0.0",
+      "tailwindcss": "^3.4.10",
+      "typescript": "~5.8.3",
+      "vite": "^5.4.19",
+      "vitest": "^2.1.9",
+      "vue-tsc": "^2.2.12",
+      "yup": "^1.7.1"
+   },
+   "peerDependencies": {
+      "vue": "^3.4.0"
+   }
+}

package/src/assets/styles/_mixins.scss

@@ -0,0 +1,73 @@
+// Block Margin Utility Mixin
+// Generates margin classes for top and bottom margins
+// 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;
+
+      &::before {
+         top: 0;
+         height: $sm-size;
+      }
+   }
+
+   &.margin-top-md {
+      padding-top: $md-size;
+
+      &::before {
+         top: 0;
+         height: $md-size;
+      }
+   }
+
+   &.margin-top-lg {
+      padding-top: $lg-size;
+
+      &::before {
+         top: 0;
+         height: $lg-size;
+      }
+   }
+
+   // Bottom margin classes
+   &.margin-bottom-sm {
+      padding-bottom: $sm-size;
+
+      &::after {
+         bottom: 0;
+         height: $sm-size;
+      }
+   }
+
+   &.margin-bottom-md {
+      padding-bottom: $md-size;
+
+      &::after {
+         bottom: 0;
+         height: $md-size;
+      }
+   }
+
+   &.margin-bottom-lg {
+      padding-bottom: $lg-size;
+
+      &::after {
+         bottom: 0;
+         height: $lg-size;
+      }
+   }
+
+   // No margin classes
+   &.margin-top-none::before,
+   &.margin-bottom-none::after {
+      display: none;
+      content: none;
+   }
+}

package/src/assets/styles/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/components/AddBlockItem/AddBlockItem.vue

@@ -0,0 +1,50 @@
+<template>
+   <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"
+      @dragstart="(event) => handleDragStart(event, block)"
+   >
+      <!-- thumbnail image -->
+      <div v-if="thumbnailUrl" class="w-full overflow-hidden rounded-md bg-neutral-100">
+         <img
+            :src="thumbnailUrl"
+            :alt="block.label || block.type"
+            class="mx-auto mb-2 h-28 w-auto object-contain"
+            @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>
+      </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>
+   </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps, ref } from "vue";
+import type { Block } from "../../types/Block";
+import { getBlockThumbnailUrl } from "../../util/registry";
+import { CubeTransparentIcon } from "@heroicons/vue/24/outline";
+
+const props = defineProps<{
+   block: Block;
+}>();
+
+const thumbnailError = ref<boolean>(false);
+const thumbnailUrl = computed(() => {
+   return getBlockThumbnailUrl(props.block.directory);
+});
+
+function handleDragStart(event: DragEvent, block: Block) {
+   if (!event.dataTransfer) return;
+   // Store the block type in dataTransfer
+   event.dataTransfer.setData("block-type", block.__name);
+   event.dataTransfer.effectAllowed = "move";
+}
+</script>

package/src/components/BlockBrowser/BlockBrowser.vue

@@ -0,0 +1,69 @@
+<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>
+      <div v-if="!blockCount" class="p-5 text-center text-sm text-zinc-500">
+         <p>Create your first block to get started.</p>
+         <p class="mt-3">
+            <a
+               href="https://github.com/sano-io/page-builder/tree/main/blocks"
+               target="_blank"
+               class="text-blue-600 underline underline-offset-2 hover:text-blue-800"
+               >How to create a block</a
+            >
+         </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">
+         <AddBlockItem v-for="block in filteredBlocks" :key="block.type" :block="block" />
+      </div>
+   </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import { pageBuilderBlocks } from "../../util/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) => {
+      // against block name and label
+      return (
+         block.type?.toLowerCase().includes(blockSearch.value.toLowerCase()) ||
+         block.label?.toLowerCase().includes(blockSearch.value.toLowerCase())
+      );
+   });
+});
+
+const blockCount = computed(() => {
+   if (!pageBuilderBlocks.value) return 0;
+   return Object.values(pageBuilderBlocks.value).length;
+});
+
+function initSortable() {
+   const sortableBlocksWrapper = document.getElementById("available-blocks-list");
+   if (!sortableBlocksWrapper) return;
+   if (!blockCount.value) return;
+   new Sortable(sortableBlocksWrapper, {
+      animation: 150,
+      ghostClass: "sortable-ghost",
+      chosenClass: "sortable-chosen",
+      dragClass: "sortable-drag",
+      group: {
+         name: "page-blocks",
+         pull: "clone",
+         put: false,
+      },
+      sort: false,
+   });
+}
+
+onMounted(() => {
+   initSortable();
+});
+</script>

package/src/components/BlockComponent/BlockComponent.vue

@@ -0,0 +1,186 @@
+<template>
+   <div
+      class="block-wrapper"
+      :class="{
+         [getMarginClass(block)]: true,
+         'active-block': activeBlock?.id === block.id,
+         'hovered-block': hoveredBlockId === block.id,
+      }"
+      :data-block-index="blockIndex"
+      :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)]"
+         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>
+      <div
+         v-else
+         class="block-not-found px-3 py-2"
+         @mouseenter="emit('hoverBlock', block.id)"
+         @mouseleave="emit('hoverBlock', null)"
+      >
+         <div class="rounded-lg bg-zinc-200 p-5 px-3 text-center text-sm text-zinc-600">
+            <p class="mb-2">Block not registered</p>
+            <span class="rounded-full bg-zinc-300 px-2 py-1 text-zinc-600">
+               {{ toCamelCase(block.type) }}
+            </span>
+         </div>
+      </div>
+   </div>
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef } from "vue";
+import { onClickOutside } from "@vueuse/core";
+import { pageBuilderBlocks } from "../../util/registry";
+import type { Block } from "../../types/Block";
+import { toCamelCase } from "../../util/helpers";
+import { onKeyStroke } from "@vueuse/core";
+
+const emit = defineEmits<{
+   (e: "hoverBlock", id: string | null): void;
+   (e: "clickBlock", block: Block | null): void;
+}>();
+
+const props = defineProps<{
+   block: Block;
+   blockIndex: number;
+   activeBlock: Block | null;
+   hoveredBlockId: string | null;
+}>();
+
+const blockComponentRef = useTemplateRef<HTMLElement | null>("blockComponentRef");
+
+// Get the margin class for the block
+// Margin is an object with top and bottom properties
+// margin classses are formatted as `margin-<direction>-<size>`
+function getMarginClass(block: Block): string {
+   const top = block.margin?.top || "none";
+   const bottom = block.margin?.bottom || "none";
+
+   // Map margin sizes to custom class names: none, sm, md, lg, xl
+   const getClass = (size: string, direction: "top" | "bottom"): string => {
+      const normalizedSize = size === "small" ? "sm" : size === "medium" ? "md" : size === "large" ? "lg" : size;
+      return `margin-${direction}-${normalizedSize}`;
+   };
+
+   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;
+   // Unset active block
+   emit("clickBlock", null);
+});
+</script>
+
+<style scoped lang="scss">
+@use "../../assets/styles/mixins" as *;
+
+.block-wrapper {
+   position: relative;
+   transition: all 0.3s ease;
+
+   // Margin spacing overlay
+   &::before,
+   &::after {
+      position: absolute;
+      left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 0;
+      font-size: 14px;
+      font-weight: 500;
+      color: #888017;
+      content: "Spacing";
+      background-color: #f7efac;
+      border: 2px dashed #d2c564;
+      border-radius: 7px;
+      opacity: 0;
+      transform: scaleY(0.9) scaleX(0.98);
+      transition: all 0.3s ease;
+   }
+
+   .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;
+      }
+   }
+
+   // Active state
+   &.active-block {
+      .block-component {
+         &::before {
+            background-color: #9fd0f643;
+            border-color: #638ef1;
+            opacity: 1;
+         }
+      }
+
+      // Show the margin spacing overlay
+      &::after,
+      &::before {
+         opacity: 1;
+      }
+   }
+
+   // Hovered state
+   &.hovered-block {
+      .block-component {
+         &::before {
+            background-color: #9fd0f643;
+            border-color: #638ef1;
+            opacity: 1;
+         }
+      }
+
+      // Show the margin spacing overlay
+      &::after,
+      &::before {
+         opacity: 1;
+      }
+   }
+
+   // Block margin classes - generated using mixin
+   @include block-margin-classes;
+}
+</style>