Merge pull request #32 from ruchamahabal/app-3

feat: Repeater & SplitView components, Copy & Paste blocks, Tailwind classes & raw style support

Author: ruchamahabal

frontend/src/components/AppComponent.vue

@@ -7,6 +7,7 @@
 		v-model="boundValue"
 		:data-component-id="block.componentId"
 		:style="styles"
+		:class="classes"
 		v-on="componentEvents"
 	>
 		<!-- Dynamically render named slots -->
@@ -28,7 +29,7 @@
 
 <script setup lang="ts">
 import Block from "@/utils/block"
-import { computed, onMounted, ref, useAttrs } from "vue"
+import { computed, onMounted, ref, useAttrs, inject } from "vue"
 import { useRouter, useRoute } from "vue-router"
 import { createResource } from "frappe-ui"
 import { getComponentRoot, isDynamicValue, getDynamicValue, isHTML, executeUserScript } from "@/utils/helpers"
@@ -43,8 +44,21 @@ const props = defineProps<{
 
 const componentRef = ref(null)
 const styles = computed(() => props.block.getStyles())
+const classes = computed(() => {
+	return [attrs.class, ...props.block.getClasses()]
+})
 
+const repeaterContext = inject("repeaterContext", {})
 const store = useAppStore()
+
+const getEvaluationContext = () => {
+	return {
+		...store.variables,
+		...store.resources,
+		...repeaterContext,
+	}
+}
+
 const getComponentProps = () => {
 	if (!props.block || props.block.isRoot()) return []
 
@@ -53,7 +67,7 @@ const getComponentProps = () => {
 
 	Object.entries(propValues).forEach(([propName, config]) => {
 		if (isDynamicValue(config)) {
-			propValues[propName] = getDynamicValue(config, { ...store.resources, ...store.variables })
+			propValues[propName] = getDynamicValue(config, getEvaluationContext())
 		}
 	})
 	return propValues
@@ -70,7 +84,7 @@ const componentProps = computed(() => {
 // visibility
 const showComponent = computed(() => {
 	if (props.block.visibilityCondition) {
-		const value = getDynamicValue(props.block.visibilityCondition, { ...store.resources, ...store.variables })
+		const value = getDynamicValue(props.block.visibilityCondition, getEvaluationContext())
 		return typeof value === "string" ? value === "true" : value
 	}
 	return true
@@ -91,7 +105,7 @@ const boundValue = computed({
 			}
 			return value
 		} else if (isDynamicValue(modelValue)) {
-			return getDynamicValue(modelValue, { ...store.resources, ...store.variables })
+			return getDynamicValue(modelValue, getEvaluationContext())
 		}
 		return modelValue
 	},
@@ -190,7 +204,7 @@ const componentEvents = computed(() => {
 				}
 			} else if (event.action === "Run Script") {
 				return () => {
-					executeUserScript(event.script, store.variables, store.resources)
+					executeUserScript(event.script, store.variables, store.resources, repeaterContext)
 				}
 			}
 		}

frontend/src/components/AppLayout/Header.vue

@@ -15,7 +15,7 @@
 				<div class="ml-auto flex flex-row items-center gap-2" v-if="!hideMenu">
 					<template v-for="item in menuItems" :key="item.label">
 						<div class="flex cursor-pointer items-center gap-2" @click="item.action">
-							<span class="text-gray-800">{{ item.label }}</span>
+							<span class="text-base text-gray-800">{{ item.label }}</span>
 						</div>
 					</template>
 				</div>

frontend/src/components/AppLayout/Repeater.vue

@@ -0,0 +1,24 @@
+<template>
+	<div class="flex flex-row flex-wrap gap-5">
+		<div
+			v-if="!data?.length"
+			class="pointer-events-none flex h-full w-full items-center justify-center p-5 text-base text-gray-500"
+		>
+			{{ emptyStateMessage || "No data" }}
+		</div>
+		<template v-else v-for="(dataItem, dataIndex) in data" :key="dataItem[dataKey]">
+			<RepeaterContextProvider :dataItem="dataItem" :dataIndex="dataIndex" :dataKey="dataKey">
+				<slot v-bind="{ dataItem, dataKey, dataIndex }"></slot>
+			</RepeaterContextProvider>
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import RepeaterContextProvider from "@/components/AppLayout/RepeaterContextProvider.vue"
+defineProps<{
+	data?: Array<any>
+	dataKey: string
+	emptyStateMessage?: string
+}>()
+</script>

frontend/src/components/AppLayout/RepeaterContextProvider.vue

@@ -0,0 +1,21 @@
+<template>
+	<slot />
+</template>
+
+<script setup lang="ts">
+import { provide, reactive } from "vue"
+
+const props = defineProps<{
+	dataItem: any
+	dataIndex: number
+	dataKey: string
+}>()
+
+const context = reactive({
+	dataItem: props.dataItem,
+	dataIndex: props.dataIndex,
+	dataKey: props.dataKey,
+})
+
+provide("repeaterContext", context)
+</script>

frontend/src/components/AppLayout/Sidebar.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="relative flex h-full min-h-screen w-60 flex-col bg-gray-50 px-2 pt-2">
+	<div class="sticky bottom-0 left-0 top-0 flex h-full w-60 flex-col bg-gray-50 px-2 pt-2">
 		<button class="mb-1 flex w-56 items-center gap-2 rounded p-2 hover:bg-gray-200">
 			<slot name="header">
 				<div class="rounded-sm">
@@ -15,7 +15,7 @@
 			</slot>
 		</button>
 
-		<nav class="mt-2 flex flex-col space-y-1">
+		<nav class="mt-2 flex flex-1 flex-col space-y-1 overflow-y-auto">
 			<div class="w-full" v-for="item in menuItems" :key="item.label">
 				<component
 					:is="item.route_to ? 'router-link' : 'div'"

frontend/src/components/AppLayout/SplitView.vue

@@ -0,0 +1,52 @@
+<template>
+	<div class="flex h-screen w-full overflow-hidden">
+		<div
+			ref="leftPane"
+			:style="{ width: leftPaneWidth + 'px' }"
+			class="flex-shrink-0 border-r border-gray-200"
+		>
+			<slot name="left"></slot>
+		</div>
+		<div
+			ref="resizer"
+			class="w-[1px] flex-shrink-0 cursor-col-resize bg-gray-200 hover:bg-gray-300"
+			@mousedown="startResize"
+		></div>
+		<div class="flex-grow overflow-auto">
+			<slot name="right"></slot>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue"
+
+const leftPane = ref(null)
+const resizer = ref(null)
+const leftPaneWidth = ref(600) // Initial width
+
+let startX = 0
+
+const startResize = (e) => {
+	startX = e.clientX
+	window.addEventListener("mousemove", resize)
+	window.addEventListener("mouseup", stopResize)
+}
+
+const resize = (e) => {
+	const delta = e.clientX - startX
+	leftPaneWidth.value = Math.max(100, leftPane.value.offsetWidth + delta) // Minimum width of 100px
+	startX = e.clientX
+}
+
+const stopResize = () => {
+	window.removeEventListener("mousemove", resize)
+	window.removeEventListener("mouseup", stopResize)
+}
+
+onMounted(() => {
+	if (leftPane.value) {
+		leftPaneWidth.value = leftPane.value.offsetWidth
+	}
+})
+</script>

frontend/src/components/BlockFlexLayoutHandler.vue

@@ -7,7 +7,7 @@
 			{ label: 'Horizontal', value: 'row', icon: 'arrow-right', hideLabel: true },
 			{ label: 'Vertical', value: 'column', icon: 'arrow-down', hideLabel: true },
 		]"
-		:modelValue="blockController.getStyle('flexDirection') || 'row'"
+		:modelValue="blockController.getStyle('flexDirection')"
 		@update:modelValue="(val: string | number) => blockController.setStyle('flexDirection', val)"
 	></OptionToggle>
 	<PlacementControl v-if="blockController.isFlex()"></PlacementControl>

frontend/src/components/BlockPositionHandler.vue

@@ -35,19 +35,17 @@
 				class="grid-col-3 dark:bg-zinc-800 grid h-16 w-16 grid-rows-3 gap-1 self-center justify-self-center rounded bg-gray-50 p-2"
 			>
 				<div
-					class="col-span-3 row-start-1 h-2 w-[2px] self-center justify-self-center rounded bg-surface-gray-2"
+					class="col-span-3 row-start-1 h-2 w-[2px] self-center justify-self-center rounded bg-gray-100"
 				></div>
 				<div
-					class="col-span-3 row-start-3 h-2 w-[2px] self-center justify-self-center rounded bg-surface-gray-2"
+					class="col-span-3 row-start-3 h-2 w-[2px] self-center justify-self-center rounded bg-gray-100"
 				></div>
+				<div class="h-5 w-5 self-center justify-self-center rounded bg-gray-400"></div>
 				<div
-					class="surface-grabg-surface-gray-2 h-5 w-5 self-center justify-self-center rounded bg-gray-400"
+					class="col-span-1 col-start-1 row-start-2 h-[2px] w-2 self-center justify-self-center rounded bg-gray-100"
 				></div>
 				<div
-					class="col-span-1 col-start-1 row-start-2 h-[2px] w-2 self-center justify-self-center rounded bg-surface-gray-2"
-				></div>
-				<div
-					class="col-span-1 col-start-3 row-start-2 h-[2px] w-2 self-center justify-self-center rounded bg-surface-gray-2"
+					class="col-span-1 col-start-3 row-start-2 h-[2px] w-2 self-center justify-self-center rounded bg-gray-100"
 				></div>
 			</div>
 			<div class="col-span-1 col-start-3 w-16 self-center">

frontend/src/components/CodeEditor.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { areObjectsEqual, jsonToJs, jsToJson } from "@/utils/helpers"
+import { jsonToJs, jsToJson } from "@/utils/helpers"
 import { useDark } from "@vueuse/core"
 import ace from "ace-builds"
 import "ace-builds/src-min-noconflict/ext-searchbox"
@@ -112,14 +112,14 @@ const setupEditor = () => {
 		try {
 			errorMessage.value = ""
 			let value = aceEditor?.getValue() || ""
+			debugger
 			if (
 				value &&
 				!value.startsWith("{{") &&
 				(props.type === "JSON" || typeof props.modelValue === "object")
 			) {
 				value = jsonToJs(value)
-				if (areObjectsEqual(value, props.modelValue)) return
-			} else if (value === props.modelValue) {
+			} else if (value === getModelValue()) {
 				return
 			}
 

frontend/src/components/ColorPicker.vue

@@ -71,7 +71,7 @@
 						}"
 					></div>
 				</div>
-				<div ref="colorPalette">
+				<div ref="colorPalette" class="max-w-[11rem]">
 					<div class="mt-3 flex flex-wrap gap-1.5">
 						<div
 							v-for="color in colors"
@@ -143,6 +143,8 @@ const colors = [
 if (!isSupported.value) {
 	colors.push("#B34D4D")
 }
+// frappe-ui grays
+colors.push("#F3F3F3", "#EDEDED")
 
 const setColorSelectorPosition = (color: HashString) => {
 	const { width, height } = colorMap.value.getBoundingClientRect()