vue-wswg-editor 0.0.1

package/src/components/BlockRepeaterFieldNode/BlockRepeaterNode.vue

@@ -0,0 +1,217 @@
+<template>
+   <div class="repeater-field">
+      <div v-if="fieldValue.length === 0" class="empty-state bg-zinc-50 px-4 py-5 text-center text-sm text-neutral-500">
+         <p class="underline underline-offset-2">No items yet.</p>
+         <button
+            v-if="editable"
+            :disabled="!!(fieldConfig.maxItems && fieldValue.length >= fieldConfig.maxItems)"
+            class="mx-auto mt-4 flex items-center gap-1 rounded-md border border-blue-200 bg-blue-50 px-2.5 py-1.5 text-sm text-blue-500 transition-all duration-200 hover:bg-blue-100 hover:text-blue-700"
+            @click="addItem"
+         >
+            <span>Add item</span>
+            <span>+</span>
+         </button>
+         <p v-else class="text-sm text-neutral-500">Enter edit mode to add items.</p>
+      </div>
+
+      <div v-else class="repeater-items space-y-2">
+         <div
+            v-for="(item, index) in fieldValue"
+            :key="`${fieldName}-item-${index}`"
+            class="repeater-item overflow-hidden rounded-lg border bg-white hover:border-zinc-300 hover:shadow-sm"
+            :class="{ 'is-open': openRepeaterItems.includes(item.id) }"
+         >
+            <div class="repeater-item-header flex items-center gap-2 bg-zinc-50 p-3">
+               <button
+                  class="text-zinc-500 hover:text-zinc-700"
+                  title="Toggle item"
+                  @click="toggleRepeaterItem(item.id)"
+               >
+                  <ChevronDownIcon v-if="!openRepeaterItems.includes(item.id)" class="size-4" />
+                  <ChevronUpIcon v-else class="size-4" />
+               </button>
+               <h4 class="mr-auto text-sm font-medium text-gray-700">
+                  <span v-if="fieldConfig.repeaterFieldLabel">
+                     {{ item[fieldConfig.repeaterFieldLabel] || `Item ${index + 1}` }}
+                  </span>
+                  <span v-else> Item {{ index + 1 }} </span>
+               </h4>
+               <div v-if="editable" class="flex items-center gap-2">
+                  <button v-if="index > 0" :disabled="!editable" title="Move item up" @click="moveItemUp(index)">
+                     <BarsArrowUpIcon class="size-4" />
+                  </button>
+                  <button v-if="index < fieldValue.length - 1" title="Move item down" @click="moveItemDown(index)">
+                     <BarsArrowDownIcon class="size-4" />
+                  </button>
+                  <button class="text-red-600 hover:text-red-700" title="Remove item" @click="removeItem(index)">
+                     <XMarkIcon class="size-4" />
+                  </button>
+               </div>
+            </div>
+
+            <div class="repeater-item-fields flex flex-col gap-3">
+               <template
+                  v-for="(subFieldConfig, subFieldName) in fieldConfig.repeaterFields"
+                  :key="`${fieldName}-${index}-${subFieldName}`"
+               >
+                  <BlockEditorFieldNode
+                     v-model="fieldValue[index][subFieldName]"
+                     :fieldConfig="subFieldConfig"
+                     :fieldName="subFieldName"
+                     :editable="editable"
+                  />
+               </template>
+            </div>
+         </div>
+      </div>
+
+      <div class="mt-3 flex justify-between gap-2">
+         <div
+            v-if="fieldConfig.minItems && fieldValue.length === fieldConfig.minItems"
+            class="mt-2 text-xs text-amber-600"
+         >
+            Minimum {{ fieldConfig.minItems }} item{{ fieldConfig.minItems > 1 ? "s" : "" }} required
+         </div>
+         <div
+            v-if="fieldConfig.maxItems && fieldValue.length >= fieldConfig.maxItems"
+            class="mt-2 text-xs text-amber-600"
+         >
+            Maximum {{ fieldConfig.maxItems }} item{{ fieldConfig.maxItems > 1 ? "s" : "" }} allowed
+         </div>
+
+         <button
+            v-if="editable && fieldValue.length"
+            :disabled="canAddItem"
+            class="ml-auto mt-1 flex items-center gap-1 rounded-md border border-blue-200 bg-blue-50 px-2.5 py-1.5 text-sm text-blue-500 transition-all duration-200 hover:bg-blue-100 hover:text-blue-700"
+            :class="{ 'cursor-not-allowed opacity-50': canAddItem }"
+            @click="addItem"
+         >
+            <span>Add item</span>
+            <PlusIcon class="size-4" />
+         </button>
+      </div>
+   </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onBeforeMount, computed } from "vue";
+import BlockEditorFieldNode from "../BlockEditorFieldNode/BlockEditorFieldNode.vue";
+import type { EditorFieldConfig } from "../../util/fieldConfig";
+import {
+   BarsArrowDownIcon,
+   BarsArrowUpIcon,
+   XMarkIcon,
+   PlusIcon,
+   ChevronDownIcon,
+   ChevronUpIcon,
+} from "@heroicons/vue/24/outline";
+
+const props = defineProps<{
+   fieldConfig: EditorFieldConfig;
+   fieldName: string;
+   editable: boolean;
+}>();
+
+const fieldValueModel = defineModel<any[]>();
+
+// Wrap fieldValue with default value handling
+const fieldValue = computed({
+   get: () => fieldValueModel.value ?? [],
+   set: (value) => {
+      fieldValueModel.value = value;
+   },
+});
+
+// Track open repeater items
+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,
+   }));
+});
+
+function addItem() {
+   if (props.fieldConfig.maxItems && fieldValue.value.length >= props.fieldConfig.maxItems) {
+      return;
+   }
+   const itemId = crypto.randomUUID();
+   // Merge the default value with the new item
+   const defaultValues = typeof props.fieldConfig.default === "object" ? props.fieldConfig.default : {};
+   const newItem = { id: itemId, ...defaultValues };
+
+   // Create a new array reference to ensure reactivity
+   fieldValue.value = [...fieldValue.value, newItem];
+   openRepeaterItems.value.push(itemId);
+}
+
+function removeItem(index: number) {
+   if (props.fieldConfig.minItems && fieldValue.value.length <= props.fieldConfig.minItems) {
+      return;
+   }
+   const itemId = fieldValue.value[index]?.id;
+   // Create a new array reference to ensure reactivity
+   fieldValue.value = fieldValue.value.filter((_, i) => i !== index);
+   if (itemId) {
+      openRepeaterItems.value = openRepeaterItems.value.filter((item) => item !== itemId);
+   }
+}
+
+function moveItemUp(index: number) {
+   if (index > 0) {
+      const newArray = [...fieldValue.value];
+      const [item] = newArray.splice(index, 1);
+      newArray.splice(index - 1, 0, item);
+      // Create a new array reference to ensure reactivity
+      fieldValue.value = newArray;
+   }
+}
+
+function moveItemDown(index: number) {
+   if (index < fieldValue.value.length - 1) {
+      const newArray = [...fieldValue.value];
+      const [item] = newArray.splice(index, 1);
+      newArray.splice(index + 1, 0, item);
+      // Create a new array reference to ensure reactivity
+      fieldValue.value = newArray;
+   }
+}
+
+function toggleRepeaterItem(itemId: string) {
+   if (openRepeaterItems.value.includes(itemId)) {
+      openRepeaterItems.value = openRepeaterItems.value.filter((item) => item !== itemId);
+   } else {
+      openRepeaterItems.value.push(itemId);
+   }
+}
+
+const canAddItem = computed(() => {
+   return !props.editable || !!(props.fieldConfig.maxItems && fieldValue.value.length >= props.fieldConfig.maxItems);
+});
+</script>
+
+<style scoped lang="scss">
+.repeater-field {
+   width: 100%;
+}
+
+.empty-state {
+   border: 2px dashed #e5e7eb;
+   border-radius: 0.5rem;
+}
+
+.repeater-item {
+   .repeater-item-fields {
+      height: 0;
+      overflow: hidden;
+   }
+
+   &.is-open {
+      .repeater-item-fields {
+         @apply p-3 h-auto border-t;
+      }
+   }
+}
+</style>

package/src/components/BrowserNavigation/BrowserNavigation.vue

@@ -0,0 +1,27 @@
+<template>
+   <!-- URL bar -->
+   <div class="browser-navigation-bar border-b bg-zinc-600 py-3 !font-sans">
+      <div class="mx-auto flex max-w-5xl items-center justify-between px-5">
+         <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>
+
+            <a
+               :href="url"
+               target="_blank"
+               title="Open in new tab"
+               class="inline-block rounded-md p-1.5 text-xs text-zinc-300 hover:bg-zinc-500 hover:text-white"
+            >
+               <ArrowUpRightIcon class="size-4" />
+            </a>
+         </div>
+      </div>
+   </div>
+</template>
+
+<script setup lang="ts">
+import { ArrowUpRightIcon } from "@heroicons/vue/24/outline";
+
+defineProps<{
+   url: string;
+}>();
+</script>

package/src/components/EmptyState/EmptyState.vue

@@ -0,0 +1,94 @@
+<template>
+   <div
+      v-if="editable"
+      class="relative p-5 py-12 text-center transition-all duration-200"
+      :class="{ 'dropzone-active': isDraggingOver }"
+      @dragover.prevent="handleDragOver"
+      @dragenter.prevent="handleDragEnter"
+      @dragleave="handleDragLeave"
+      @drop.prevent="handleDrop"
+   >
+      <!-- Dropzone overlay -->
+      <div
+         v-if="isDraggingOver"
+         class="absolute inset-0 z-10 flex items-center justify-center rounded-lg border-2 border-dashed border-blue-500 bg-blue-50/80 backdrop-blur-sm"
+      >
+         <div class="text-center">
+            <p class="text-lg font-semibold text-blue-700">Drop block here</p>
+            <p class="mt-1 text-sm text-blue-600">Release to add your first block</p>
+         </div>
+      </div>
+
+      <h2 class="mb-3 text-xl font-bold">No blocks found</h2>
+      <template v-if="editable">
+         <button
+            v-if="!showAddBlockMenu"
+            class="mb-9 inline-flex items-center gap-1.5 rounded-md border bg-zinc-50 px-3 py-2 text-sm text-zinc-500 hover:border-zinc-400 hover:text-zinc-900 active:border-blue-600 active:bg-blue-50 active:text-blue-600"
+            @click="showAddBlockMenu = true"
+         >
+            Add a block to get started
+         </button>
+         <span
+            v-else
+            class="mb-9 inline-flex items-center gap-1.5 border border-transparent px-3 py-2 text-sm text-zinc-500"
+         >
+            Select a block from the sidebar
+         </span>
+      </template>
+      <!-- empty state image from assets -->
+      <img :src="emptyStateImage" alt="Empty state" class="mx-auto h-auto w-full max-w-xs" />
+   </div>
+   <div v-else class="p-5 py-12 text-center">
+      <h2 class="mb-3 text-xl font-bold">No blocks found</h2>
+      <!-- empty state image from assets -->
+      <img :src="emptyStateImage" alt="Empty state" class="mx-auto h-auto w-full max-w-xs" />
+   </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import emptyStateImage from "../../assets/images/empty-state.jpg";
+
+const showAddBlockMenu = defineModel<boolean>("showAddBlockMenu");
+const isDraggingOver = ref(false);
+const emit = defineEmits<{
+   (e: "blockAdded", blockType: string): void;
+}>();
+
+defineProps<{
+   editable: boolean;
+}>();
+
+function handleDragOver(event: DragEvent) {
+   if (!event.dataTransfer) return;
+   event.dataTransfer.dropEffect = "move";
+   isDraggingOver.value = true;
+}
+
+function handleDragEnter(event: DragEvent) {
+   if (!event.dataTransfer) return;
+   event.dataTransfer.dropEffect = "move";
+   isDraggingOver.value = true;
+}
+
+function handleDragLeave(event: DragEvent) {
+   const relatedTarget = event.relatedTarget as HTMLElement | null;
+   const currentTarget = event.currentTarget as HTMLElement | null;
+
+   if (!currentTarget?.contains(relatedTarget)) {
+      isDraggingOver.value = false;
+   }
+}
+
+function handleDrop(event: DragEvent) {
+   isDraggingOver.value = false;
+
+   if (!event.dataTransfer) return;
+
+   // Get block type from dataTransfer
+   const blockType = event.dataTransfer.getData("block-type");
+   if (blockType) {
+      emit("blockAdded", blockType);
+   }
+}
+</script>

package/src/components/PageBlockList/PageBlockList.vue

@@ -0,0 +1,103 @@
+<template>
+   <div id="page-blocks-list" class="flex flex-col gap-1 p-5">
+      <template v-if="pageBlocks?.length">
+         <div
+            v-for="block in pageBlocks"
+            :key="block.id"
+            :class="{ 'hovered-block': hoveredBlockId === block.id }"
+            class="block-item -mx-2.5 flex cursor-pointer items-center gap-1 rounded-md p-2.5 text-sm text-neutral-900"
+            @mouseenter="setHoveredBlockId(block.id)"
+            @mouseleave="setHoveredBlockId(null)"
+            @click="emit('block-click', block)"
+         >
+            <p>{{ block.label || block.type }}</p>
+            <span v-if="!block.__file" class="ml-auto rounded-full bg-zinc-100 px-2 py-0.5 text-xs text-zinc-500"
+               >Not registered</span
+            >
+         </div>
+      </template>
+      <template v-else>
+         <p class="bg-zinc-100 p-5 text-center text-sm text-zinc-500">No blocks added yet.</p>
+      </template>
+   </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineEmits, onMounted, ref } from "vue";
+import { pageBuilderBlocks } from "../../util/registry";
+import type { Block } from "../../types/Block";
+import { toCamelCase, toNiceName } from "../../util/helpers";
+import Sortable from "sortablejs";
+
+const emit = defineEmits<{
+   (e: "block-click", block: Block): void;
+}>();
+
+const pageData = defineModel<any>();
+const hoveredBlockId = defineModel<string | null>("hoveredBlockId");
+const isSorting = ref(false);
+const props = defineProps<{
+   blocksKey: string;
+   settingsKey: string;
+}>();
+
+const pageBlocks = computed(() => {
+   if (!pageData.value?.[props.blocksKey]) return [];
+   // loop through pageData[blocksKey] and get the block data from registry or return a default block data
+   return pageData.value[props.blocksKey].map((block: any) => {
+      if (pageBuilderBlocks.value[toCamelCase(block.type)]) {
+         return {
+            ...pageBuilderBlocks.value[toCamelCase(block.type)],
+            ...block,
+         };
+      }
+      // Fallback to default block data
+      return {
+         id: block.id,
+         name: block.type,
+         label: toNiceName(block.type),
+         icon: "question-mark",
+         thumbnail: "https://via.placeholder.com/150",
+      };
+   });
+});
+
+function setHoveredBlockId(id: string | null) {
+   if (isSorting.value) return;
+   hoveredBlockId.value = id;
+}
+
+function initSortable() {
+   const sortableListWrapper = document.getElementById("page-blocks-list");
+   if (!sortableListWrapper) return;
+   new Sortable(sortableListWrapper, {
+      animation: 150,
+      ghostClass: "sortable-ghost",
+      chosenClass: "sortable-chosen",
+      dragClass: "sortable-drag",
+      onStart: () => {
+         isSorting.value = true;
+      },
+      onEnd: (event: any) => {
+         isSorting.value = false;
+         const { oldIndex, newIndex } = event;
+         if (oldIndex !== newIndex) {
+            const movedBlock = pageData.value?.[props.blocksKey]?.splice(oldIndex, 1)[0];
+            pageData.value?.[props.blocksKey]?.splice(newIndex, 0, movedBlock);
+         }
+      },
+   });
+}
+
+onMounted(() => {
+   initSortable();
+});
+</script>
+
+<style scoped lang="scss">
+.block-item {
+   &.hovered-block {
+      @apply bg-blue-100 text-blue-600;
+   }
+}
+</style>

package/src/components/PageBuilderSidebar/PageBuilderSidebar.vue

@@ -0,0 +1,241 @@
+<template>
+   <div id="page-builder-sidebar" class="page-builder-sidebar">
+      <!-- Page settings -->
+      <PageSettings v-if="showPageSettings" v-model="pageData" :editable="editable" @close="showPageSettings = false" />
+      <!-- Active section-->
+      <div v-else-if="activeBlock">
+         <!-- back header -->
+         <div class="flex items-start justify-between border-b bg-white p-5">
+            <div>
+               <button
+                  class="cursor-pointer text-sm text-zinc-500 hover:text-zinc-900 hover:underline"
+                  @click="activeBlock = null"
+               >
+                  ← Back
+               </button>
+               <h4 class="mt-1 text-lg font-bold">{{ computedActiveBlock.label || computedActiveBlock.type }}</h4>
+            </div>
+            <!-- delete section button -->
+            <button
+               v-if="activeBlock && editable"
+               class="inline-flex size-7 cursor-pointer items-center justify-center rounded-md border bg-zinc-100 text-zinc-500 hover:border-red-200 hover:bg-red-100 hover:text-red-600"
+               title="Delete block"
+               @click="handleDeleteBlock"
+            >
+               <TrashIcon class="size-4" />
+            </button>
+         </div>
+         <BlockEditorFields
+            v-model="computedActiveBlock.data"
+            :fields="computedActiveBlock.fields"
+            :editable="editable"
+         />
+      </div>
+      <!-- Add block menu -->
+      <div v-else-if="showAddBlockMenu">
+         <div class="flex items-center justify-between border-b bg-white p-5">
+            <div>
+               <button
+                  class="cursor-pointer text-sm text-zinc-500 hover:text-zinc-900 hover:underline"
+                  @click="showAddBlockMenu = false"
+               >
+                  ← Back
+               </button>
+               <h4 class="mt-1 text-lg font-bold">Add block</h4>
+            </div>
+         </div>
+         <!-- Blocks list -->
+         <BlockBrowser />
+      </div>
+      <!-- No active block -->
+      <div v-else>
+         <div class="flex items-center justify-between border-b bg-white p-5">
+            <h4 class="text-lg font-bold">Blocks ({{ pageData?.[blocksKey]?.length }})</h4>
+            <button
+               v-if="editable"
+               class="inline-flex items-center gap-1.5 rounded-md border bg-zinc-50 px-3 py-2 text-xs text-zinc-500 hover:border-zinc-400 hover:text-zinc-900 active:border-blue-600 active:bg-blue-50 active:text-blue-600"
+               title="Add block"
+               @click="handleShowAddBlockMenu"
+            >
+               <span>Add block</span>
+               <PlusIcon class="size-3" />
+            </button>
+         </div>
+         <!-- Blocks list -->
+         <PageBlockList
+            v-model="pageData"
+            v-model:hoveredBlockId="hoveredBlockId"
+            :editable="editable"
+            :blocksKey="blocksKey"
+            :settingsKey="settingsKey"
+            @block-click="handleBlockClick"
+         />
+      </div>
+   </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { pageBuilderBlocks } from "../../util/registry";
+import type { Block } from "../../types/Block";
+import { toCamelCase } from "../../util/helpers";
+import BlockBrowser from "../BlockBrowser/BlockBrowser.vue";
+import BlockEditorFields from "../BlockEditorFields/BlockEditorFields.vue";
+import PageBlockList from "../PageBlockList/PageBlockList.vue";
+import PageSettings from "../PageSettings/PageSettings.vue";
+import { TrashIcon, PlusIcon } from "@heroicons/vue/24/outline";
+// Models
+const pageData = defineModel<any>();
+const activeBlock = defineModel<any>("activeBlock");
+const hoveredBlockId = defineModel<string | null>("hoveredBlockId");
+const showPageSettings = defineModel<boolean>("showPageSettings");
+const showAddBlockMenu = defineModel<boolean>("showAddBlockMenu");
+
+// Editable prop
+const props = withDefaults(
+   defineProps<{
+      editable?: boolean;
+      blocksKey?: string;
+      settingsKey?: string;
+   }>(),
+   {
+      editable: true,
+      blocksKey: "blocks",
+      settingsKey: "settings",
+   }
+);
+
+// Reactive merged block data that syncs with activeBlock
+const computedActiveBlock = computed(() => {
+   if (!activeBlock.value) {
+      return null;
+   }
+
+   // Get the block type from activeBlock (e.g., "heroSection", "faqSection")
+   const blockType = activeBlock.value.type;
+   if (!blockType) {
+      return activeBlock.value;
+   }
+
+   // Find the corresponding block in the registry
+   const registryBlock = pageBuilderBlocks.value[toCamelCase(blockType)];
+
+   if (!registryBlock) {
+      // If no registry block found, return activeBlock as-is
+      return activeBlock.value;
+   }
+
+   // Find the actual block object in pageData[blocksKey] to ensure we're updating the source
+   const blockId = activeBlock.value.id;
+   const actualBlock = pageData.value?.[props.blocksKey]?.find((b: any) => b.id === blockId) || activeBlock.value;
+
+   // Create a proxy that nests all instance data under a 'data' property
+   // Registry metadata (name, label, icon, directory, fields) stays at the top level
+   return new Proxy({} as any, {
+      get(_, prop) {
+         // If accessing 'data', return a proxy to the actual block object
+         if (prop === "data") {
+            return new Proxy(actualBlock, {
+               get(target, dataProp) {
+                  return target[dataProp as keyof typeof target];
+               },
+               set(target, dataProp, value) {
+                  target[dataProp as keyof typeof target] = value;
+                  // Also update activeBlock.value to keep it in sync
+                  if (activeBlock.value) {
+                     activeBlock.value[dataProp as keyof typeof activeBlock.value] = value;
+                  }
+                  return true;
+               },
+               has(target, dataProp) {
+                  return dataProp in target;
+               },
+               ownKeys(target) {
+                  return Object.keys(target);
+               },
+               getOwnPropertyDescriptor(target, dataProp) {
+                  return Object.getOwnPropertyDescriptor(target, dataProp);
+               },
+            });
+         }
+         // For all other properties, return registry metadata
+         return registryBlock[prop as keyof typeof registryBlock];
+      },
+      set(_, prop) {
+         // Only allow setting registry metadata properties (though this shouldn't happen)
+         // Instance data should be set via the 'data' property
+         if (prop in registryBlock) {
+            // Silently ignore attempts to set registry properties
+            return true;
+         }
+         return false;
+      },
+      has(_, prop) {
+         // Check if property exists in registry or if it's 'data'
+         return prop === "data" || prop in registryBlock;
+      },
+      ownKeys() {
+         // Return registry keys plus 'data'
+         const registryKeys = Object.keys(registryBlock);
+         return ["data", ...registryKeys];
+      },
+      getOwnPropertyDescriptor(_, prop) {
+         if (prop === "data") {
+            return {
+               enumerable: true,
+               configurable: true,
+            };
+         }
+         if (prop in registryBlock) {
+            return Object.getOwnPropertyDescriptor(registryBlock, prop);
+         }
+         return undefined;
+      },
+   });
+});
+
+function handleBlockClick(block: Block) {
+   activeBlock.value = block;
+   hoveredBlockId.value = null;
+   showAddBlockMenu.value = false;
+   showPageSettings.value = false;
+}
+
+function handleShowAddBlockMenu() {
+   if (!props.editable) return;
+   showAddBlockMenu.value = true;
+}
+
+async function handleDeleteBlock() {
+   if (!props.editable) return;
+   // confirm delete block (native browser confirm)
+   const blockName = computedActiveBlock.value?.label || computedActiveBlock.value?.type;
+   const confirm = window.confirm(
+      `Are you sure you want to delete this ${blockName} block?\n\nThis action cannot be undone.`
+   );
+   if (!confirm) return;
+
+   // Find the index of the block by matching its id
+   const blockId = activeBlock.value?.id;
+   if (!blockId || !pageData.value?.[props.blocksKey]) return;
+
+   const blocks = pageData.value[props.blocksKey];
+   const blockIndex = blocks.findIndex((block: any) => block.id === blockId);
+
+   if (blockIndex !== -1) {
+      blocks.splice(blockIndex, 1);
+   }
+
+   activeBlock.value = null;
+   hoveredBlockId.value = null;
+   showAddBlockMenu.value = false;
+}
+</script>
+
+<style scoped lang="scss">
+.page-builder-sidebar {
+   height: 100%;
+   overflow-y: auto;
+   background: #fff;
+}
+</style>