feat(ui): refactor ChildlessPlaceholder and use BaseEmptiness. WF-20

src/ui/src/core_components/base/BaseEmptiness.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="displayEmpty" class="BaseEmptiness">
+	<div class="BaseEmptiness">
 		<div class="content">
 			<div class="title">
 				<h3>Empty {{ definition.name }}</h3>
@@ -9,7 +9,6 @@
 			</div>
 		</div>
 	</div>
-	<slot v-else-if="displayContent" />
 </template>
 
 <script setup lang="ts">
@@ -19,20 +18,15 @@ import injectionKeys from "../../injectionKeys";
 const props = defineProps({
 	componentId: { type: String, required: true },
 	message: { type: String, required: false, default: undefined },
-	isEmpty: { type: Boolean },
 });
 
 const wf = inject(injectionKeys.core);
 const component = computed(() => wf.getComponentById(props.componentId));
 const definition = computed(() =>
 	wf.getComponentDefinition(component.value.type),
 );
-
-const isBeingEdited = inject(injectionKeys.isBeingEdited);
-
-const displayEmpty = computed(() => isBeingEdited.value && props.isEmpty);
-const displayContent = computed(() => !displayEmpty.value && !props.isEmpty);
 </script>
+
 <style scoped>
 @import "../../renderer/sharedStyles.css";
 

src/ui/src/core_components/content/CoreMessage.vue

@@ -24,16 +24,13 @@ else:
 			</LoadingSymbol>
 			<span>{{ messageWithoutPrefix }}</span>
 		</div>
-		<div v-else class="empty">
-			<h3>Blank message</h3>
-		</div>
+		<BaseEmptiness v-else :component-id="componentId" />
 	</div>
 </template>
 
 <script lang="ts">
-import LoadingSymbol from "../../renderer/LoadingSymbol.vue";
-import { FieldCategory, FieldType } from "../../writerTypes";
 import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
+import { FieldCategory, FieldType } from "../../writerTypes";
 
 const description =
 	"A component that displays a message in various styles, including success, error, warning, and informational.";
@@ -86,10 +83,14 @@ export default {
 	},
 };
 </script>
+
 <script setup lang="ts">
 import { computed, inject } from "vue";
 import injectionKeys from "../../injectionKeys";
+import LoadingSymbol from "../../renderer/LoadingSymbol.vue";
+import BaseEmptiness from "../base/BaseEmptiness.vue";
 
+const componentId = inject(injectionKeys.componentId);
 const fields = inject(injectionKeys.evaluatedFields);
 const isBeingEdited = inject(injectionKeys.isBeingEdited);
 
@@ -157,14 +158,4 @@ const rootStyle = computed(() => {
 .loadingSymbol {
 	margin: -8px 0 -8px 0;
 }
-
-.empty {
-	padding: 16px;
-	background-color: #e4e7ed;
-}
-
-.empty > h3 {
-	text-align: center;
-	color: var(--primaryTextColor);
-}
 </style>

src/ui/src/core_components/content/CoreText.vue

@@ -1,6 +1,13 @@
 <template>
-	<div ref="rootEl" class="CoreText" :style="rootStyle" @click="handleClick">
-		<BaseEmptiness :is-empty="isEmpty" :component-id="componentId">
+	<div
+		v-if="shouldDisplay"
+		ref="rootEl"
+		class="CoreText"
+		:style="rootStyle"
+		@click="handleClick"
+	>
+		<BaseEmptiness v-if="isEmpty" :component-id="componentId" />
+		<template v-else>
 			<BaseMarkdown
 				v-if="fields.useMarkdown.value == 'yes'"
 				:raw-text="fields.text.value"
@@ -10,7 +17,7 @@
 			<div v-else class="plainText" :style="contentStyle">
 				{{ fields.text.value }}
 			</div>
-		</BaseEmptiness>
+		</template>
 	</div>
 </template>
 
@@ -87,7 +94,9 @@ const fields = inject(injectionKeys.evaluatedFields);
 const componentId = inject(injectionKeys.componentId);
 const wf = inject(injectionKeys.core);
 
+const isBeingEdited = inject(injectionKeys.isBeingEdited);
 const isEmpty = computed(() => !fields.text.value);
+const shouldDisplay = computed(() => !isEmpty.value || isBeingEdited.value);
 
 const rootStyle = computed(() => {
 	const component = wf.getComponentById(componentId);

src/ui/src/renderer/ChildlessPlaceholder.vue

@@ -1,32 +1,23 @@
 <template>
-	<div class="ChildlessPlaceholder">
-		<div class="content">
-			<div class="title">
-				<h3>Empty {{ definition.name }}</h3>
-			</div>
-			<div v-if="message" class="message">
-				{{ message }}
-			</div>
-		</div>
-	</div>
+	<BaseEmptiness
+		class="ChildlessPlaceholder"
+		:component-id="componentId"
+		:message="message"
+	/>
 </template>
+
 <script setup lang="ts">
-import { computed, inject, toRefs } from "vue";
-import { Component } from "../writerTypes";
+import { computed, inject } from "vue";
+import BaseEmptiness from "../core_components/base/BaseEmptiness.vue";
 import injectionKeys from "../injectionKeys";
+import { Component } from "../writerTypes";
 
 const ALLOWED_LIST_MAX_LENGTH = 10;
 const wf = inject(injectionKeys.core);
 
-interface Props {
-	componentId: Component["id"];
-}
-const props = defineProps<Props>();
-const { componentId } = toRefs(props);
-const component = computed(() => wf.getComponentById(componentId.value));
-const definition = computed(() =>
-	wf.getComponentDefinition(component.value.type),
-);
+const props = defineProps({
+	componentId: { type: String, required: true },
+});
 
 const typesToMessage = (
 	types: Component["type"][],
@@ -41,7 +32,7 @@ const typesToMessage = (
 };
 
 const message = computed(() => {
-	const containableTypes = wf.getContainableTypes(componentId.value);
+	const containableTypes = wf.getContainableTypes(props.componentId);
 	let message: string;
 
 	if (containableTypes.length <= ALLOWED_LIST_MAX_LENGTH) {
@@ -52,30 +43,3 @@ const message = computed(() => {
 	return message;
 });
 </script>
-<style scoped>
-@import "./sharedStyles.css";
-
-.ChildlessPlaceholder {
-	background: #e4e7ed;
-	color: #4f4f4f;
-	padding: 16px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 100%;
-	min-height: 100%;
-}
-
-.content {
-	text-align: center;
-}
-
-.title > h3 {
-	color: #4f4f4f;
-}
-
-.message {
-	opacity: 0.5;
-	margin-top: 8px;
-}
-</style>