test: add prop

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();
+	});
 });

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
+	<div :class="classes" />
-		:class="{
-			[$style.rectangle]: true,
-			handleClasses,
-			[$style['rectangle--hovered']]: sourceEdgeHovered,
-		}"
-	/>
 </template>
 
 <style lang="scss" module>