From 50cbfba5a1d89614fe0df139c3c119be9fb9b1d0 Mon Sep 17 00:00:00 2001
From: r00gm <raul00gm@gmail.com>
Date: Wed, 18 Sep 2024 11:59:08 +0200
Subject: [PATCH] test: add prop

---
 .../parts/CanvasHandleRectangle.spec.ts       |  8 ++++++++
 .../parts/CanvasHandleRectangle.vue           | 20 +++++++++++--------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleRectangle.spec.ts b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleRectangle.spec.ts
index 3c1787406e..ca980c0e4a 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleRectangle.spec.ts
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleRectangle.spec.ts
@@ -18,4 +18,12 @@ describe('CanvasHandleRectangle', () => {
 
 		expect(wrapper.container.querySelector(`.${customClass}`)).toBeTruthy();
 	});
+
+	it('should apply sourceEdgeHovered prop correctly', () => {
+		const wrapper = renderComponent({
+			props: { sourceEdgeHovered: true },
+		});
+
+		expect(wrapper.container.querySelector('.rectangle--hovered')).toBeTruthy();
+	});
 });
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleRectangle.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleRectangle.vue
index bf79ca209c..24ed6d888c 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleRectangle.vue
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleRectangle.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-withDefaults(
+import { computed, useCssModule } from 'vue';
+
+const props = withDefaults(
 	defineProps<{
 		handleClasses?: string;
 		sourceEdgeHovered: boolean;
@@ -8,16 +10,18 @@ withDefaults(
 		handleClasses: undefined,
 	},
 );
+
+const $style = useCssModule();
+
+const classes = computed(() => [
+	$style.rectangle,
+	props.handleClasses,
+	...(props.sourceEdgeHovered ? [$style['rectangle--hovered']] : []),
+]);
 </script>
 
 <template>
-	<div
-		:class="{
-			[$style.rectangle]: true,
-			handleClasses,
-			[$style['rectangle--hovered']]: sourceEdgeHovered,
-		}"
-	/>
+	<div :class="classes" />
 </template>
 
 <style lang="scss" module>