Merge pull request #13 from ruchamahabal/editing-slots

Author: ruchamahabal

frontend/package.json

@@ -11,16 +11,16 @@
 		"extract-studio-types": "tsx src/scripts/tsToJSONGenerator.ts studio"
 	},
 	"dependencies": {
-		"@vitejs/plugin-vue": "^4.2.3",
+		"@vitejs/plugin-vue": "^5.2.0",
 		"@vueuse/components": "^10.11.1",
 		"@vueuse/core": "^10.11.1",
 		"ace-builds": "^1.36.2",
 		"autoprefixer": "^10.4.2",
 		"feather-icons": "^4.28.0",
 		"frappe-ui": "0.1.87",
-		"lucide-vue-next": "^0.427.0",
+		"lucide-vue-next": "^0.468.0",
 		"pinia": "^2.2.1",
-		"vite": "^4.4.9",
+		"vite": "^5.4.11",
 		"vue": "^3.4.12",
 		"vue-router": "^4.2.2",
 		"vuedraggable": "^4.1.0",

frontend/src/components/AppComponent.vue

@@ -7,6 +7,23 @@
 		:style="styles"
 		v-on="componentEvents"
 	>
+		<!-- Dynamically render named slots -->
+		<template v-for="(slot, slotName) in block.componentSlots" :key="slotName" v-slot:[slotName]>
+			<template v-if="Array.isArray(slot.slotContent)">
+				<AppComponent
+					v-for="slotBlock in slot.slotContent"
+					:block="slotBlock"
+					:key="slotBlock.componentId"
+				/>
+			</template>
+			<template v-else-if="isHTML(slot.slotContent)">
+				<component :is="{ template: slot.slotContent }" />
+			</template>
+			<template v-else>
+				{{ slot.slotContent }}
+			</template>
+		</template>
+
 		<AppComponent v-for="child in block?.children" :key="child.componentId" :block="child" />
 	</component>
 </template>
@@ -17,7 +34,7 @@ import { computed, onMounted, ref, useAttrs } from "vue"
 import { useRouter, useRoute } from "vue-router"
 import { createResource } from "frappe-ui"
 import components from "@/data/components"
-import { getComponentRoot, isDynamicValue, getDynamicValue } from "@/utils/helpers"
+import { getComponentRoot, isDynamicValue, getDynamicValue, isHTML } from "@/utils/helpers"
 
 import useAppStore from "@/stores/appStore"
 

frontend/src/components/AppLayout/TextBlock.vue

@@ -13,6 +13,6 @@ withDefaults(defineProps<TextBlockProps>(), {
 	fontWeight: "font-normal",
 	lineHeight: "leading-normal",
 	textColor: "text-gray-900",
-	text: "This is a text block",
+	text: "Text Block",
 })
 </script>

frontend/src/components/ComponentContextMenu.vue

@@ -1,6 +1,5 @@
 <template>
 	<div>
-		<slot :onContextMenu="showContextMenu" />
 		<ContextMenu
 			v-if="contextMenuVisible"
 			v-on-click-outside="() => (contextMenuVisible = false)"
@@ -13,27 +12,24 @@
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick } from "vue"
+import { ref, Ref } from "vue"
 import { vOnClickOutside } from "@vueuse/components"
 import ContextMenu from "@/components/ContextMenu.vue"
 import Block from "@/utils/block"
 import useStudioStore from "@/stores/studioStore"
 import { ContextMenuOption } from "@/types"
-import { getComponentBlock } from "@/utils/helpers"
-
-const props = defineProps<{
-	block: Block
-	editable: boolean
-}>()
+import { getComponentBlock, isObjectEmpty } from "@/utils/helpers"
 
 const store = useStudioStore()
 
 const contextMenuVisible = ref(false)
 const posX = ref(0)
 const posY = ref(0)
 
-const showContextMenu = (e: MouseEvent) => {
-	if (props.block.isRoot() || props.editable) return
+const block = ref(null) as unknown as Ref<Block>
+const showContextMenu = (e: MouseEvent, refBlock: Block) => {
+	block.value = refBlock
+	if (block.value.isRoot()) return
 	contextMenuVisible.value = true
 	posX.value = e.pageX
 	posY.value = e.pageY
@@ -49,24 +45,28 @@ const handleContextMenuSelect = (action: CallableFunction) => {
 const contextMenuOptions: ContextMenuOption[] = [
 	{
 		label: "Duplicate",
-		action: () => props.block.duplicateBlock(),
+		action: () => block.value.duplicateBlock(),
 	},
 	{
 		label: "Delete",
 		action: () => {
-			props.block.getParentBlock()?.removeChild(props.block)
+			block.value.deleteBlock()
 		},
 		condition: () => {
-			return !props.block.isRoot() && Boolean(props.block.getParentBlock())
+			return !block.value.isRoot() && Boolean(block.value.getParentBlock())
 		},
 	},
 	{
 		label: "Wrap In Container",
 		action: () => {
-			const newBlockObj = getComponentBlock("FitContainer")
-			const parentBlock = props.block.getParentBlock()
+			const parentBlock = block.value.getParentBlock()
 			if (!parentBlock) return
 
+			const newBlockObj = getComponentBlock("FitContainer")
+			if (block.value.isSlotBlock()) {
+				newBlockObj.parentSlotName = block.value.parentSlotName
+			}
+
 			const selectedBlocks = store.selectedBlocks || []
 			const blockPosition = Math.min(...selectedBlocks.map(parentBlock.getChildIndex.bind(parentBlock)))
 			const newBlock = parentBlock?.addChild(newBlockObj, blockPosition)
@@ -77,6 +77,9 @@ const contextMenuOptions: ContextMenuOption[] = [
 				.sort((a, b) => parentBlock.getChildIndex(a) - parentBlock.getChildIndex(b))
 				.forEach((block) => {
 					parentBlock?.removeChild(block)
+					if (block.parentSlotName) {
+						delete block.parentSlotName
+					}
 					newBlock?.addChild(block)
 					if (!width) {
 						const blockWidth = block.getStyle("width") as string | undefined
@@ -95,5 +98,17 @@ const contextMenuOptions: ContextMenuOption[] = [
 			}
 		},
 	},
+	{
+		label: "Edit Slot",
+		action: () => {
+			store.showSlotEditorDialog = true
+		},
+		condition: () =>
+			!isObjectEmpty(block.value.componentSlots) && block.value.isSlotEditable(store.selectedSlot),
+	},
 ]
+
+defineExpose({
+	showContextMenu,
+})
 </script>