refactor: component base with built-in mask

writer · Feb 23, 2024 · a3d53c6 · a3d53c6
1 parent 0db0d6f
commit a3d53c6
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 21 deletions.
diff --git a/ui/src/core_components/embed/CoreIFrame.vue b/ui/src/core_components/embed/CoreIFrame.vue
@@ -1,8 +1,7 @@
 <template>
-	<div ref="rootEl" class="CoreIFrame">
+	<ComponentBase ref="rootEl" class="CoreIFrame">
 		<iframe :src="fields.src.value" draggable="false" @load="handleLoad" />
-		<div class="mask" />
-	</div>
+	</ComponentBase>
 </template>
 
 <script lang="ts">
@@ -46,6 +45,8 @@ export default {
 import { Ref, inject, ref } from "vue";
 import injectionKeys from "../../injectionKeys";
 
+import ComponentBase from "../../renderer/ComponentBase.vue";
+
 const rootEl: Ref<HTMLElement> = ref(null);
 const fields = inject(injectionKeys.evaluatedFields);
 
@@ -75,22 +76,4 @@ function handleLoad() {
 	margin: auto;
 	border: 1px solid var(--separatorColor);
 }
-
-.CoreIFrame .mask {
-	pointer-events: none;
-}
-
-.CoreIFrame.beingEdited .mask {
-	pointer-events: auto;
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(0, 0, 0, 0);
-}
-
-.CoreIFrame.beingEdited.selected .mask {
-	pointer-events: none;
-}
 </style>
diff --git a/ui/src/renderer/ComponentBase.vue b/ui/src/renderer/ComponentBase.vue
@@ -0,0 +1,25 @@
+<template>
+	<div class="ComponentBase">
+		<slot />
+		<div class="mask" />
+	</div>
+</template>
+
+<style scoped>
+.ComponentBase .mask {
+	pointer-events: none;
+}
+
+.ComponentBase.beingEdited .mask {
+	pointer-events: auto;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.ComponentBase.beingEdited.selected .mask {
+	pointer-events: none;
+}
+</style>