feat: implement BaseEmptiness

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

@@ -0,0 +1,62 @@
+<template>
+	<div v-if="displayEmpty" class="BaseEmptiness">
+		<div class="content">
+			<div class="title">
+				<h3>Empty {{ definition.name }}</h3>
+			</div>
+			<div v-if="message" class="message">
+				{{ message }}
+			</div>
+		</div>
+	</div>
+	<slot v-else-if="displayContent" />
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from "vue";
+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";
+
+.BaseEmptiness {
+	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>

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

@@ -1,28 +1,23 @@
 <template>
-	<div
-		v-if="isDisplayed"
-		ref="rootEl"
-		class="CoreText"
-		:style="rootStyle"
-		@click="handleClick"
-	>
-		<BaseMarkdown
-			v-if="fields.useMarkdown.value == 'yes'"
-			:raw-text="fields.text.value"
-			:style="contentStyle"
-		>
-		</BaseMarkdown>
-		<div v-else class="plainText" :style="contentStyle">
-			{{ fields.text.value }}
-		</div>
+	<div ref="rootEl" class="CoreText" :style="rootStyle" @click="handleClick">
+		<BaseEmptiness :is-empty="isEmpty" :component-id="componentId">
+			<BaseMarkdown
+				v-if="fields.useMarkdown.value == 'yes'"
+				:raw-text="fields.text.value"
+				:style="contentStyle"
+			>
+			</BaseMarkdown>
+			<div v-else class="plainText" :style="contentStyle">
+				{{ fields.text.value }}
+			</div>
+		</BaseEmptiness>
 	</div>
 </template>
 
 <script lang="ts">
 import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
 import { getClick } from "../../renderer/syntheticEvents";
 import { FieldCategory, FieldControl, FieldType } from "../../writerTypes";
-import BaseMarkdown from "../base/BaseMarkdown.vue";
 
 const clickHandlerStub = `
 def click_handler(state):
@@ -34,8 +29,6 @@ def click_handler(state):
 const description =
 	"A component to display plain text or formatted text using Markdown syntax.";
 
-const emptyText = "(No text)";
-
 export default {
 	writer: {
 		name: "Text",
@@ -44,7 +37,6 @@ export default {
 		fields: {
 			text: {
 				name: "Text",
-				default: emptyText,
 				init: "Text",
 				desc: "Add text directly, or reference state elements with @{my_text}.",
 				type: FieldType.Text,
@@ -87,16 +79,15 @@ export default {
 <script setup lang="ts">
 import { Ref, computed, inject, ref } from "vue";
 import injectionKeys from "../../injectionKeys";
+import BaseEmptiness from "../base/BaseEmptiness.vue";
+import BaseMarkdown from "../base/BaseMarkdown.vue";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const fields = inject(injectionKeys.evaluatedFields);
 const componentId = inject(injectionKeys.componentId);
-const isBeingEdited = inject(injectionKeys.isBeingEdited);
 const wf = inject(injectionKeys.core);
 
-const isDisplayed = computed(
-	() => isBeingEdited.value || fields.text.value !== emptyText,
-);
+const isEmpty = computed(() => !fields.text.value);
 
 const rootStyle = computed(() => {
 	const component = wf.getComponentById(componentId);