From 8df09e1b2189bb5275ca79007ceb96118815151a Mon Sep 17 00:00:00 2001
From: Joscha <joscha@plugh.de>
Date: Mon, 3 Mar 2025 14:53:50 +0100
Subject: [PATCH] Extract error into component

---
 .../src/components/CSegmentCalendar.vue           |  9 ++-------
 .../src/components/CSegmentError.vue              | 15 +++++++++++++++
 .../src/components/CSegmentText.vue               |  9 ++-------
 3 files changed, 19 insertions(+), 14 deletions(-)
 create mode 100644 showbits-thermal-printer-ui/src/components/CSegmentError.vue

diff --git a/showbits-thermal-printer-ui/src/components/CSegmentCalendar.vue b/showbits-thermal-printer-ui/src/components/CSegmentCalendar.vue
index 4ce8bfc..2af331c 100644
--- a/showbits-thermal-printer-ui/src/components/CSegmentCalendar.vue
+++ b/showbits-thermal-printer-ui/src/components/CSegmentCalendar.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, useTemplateRef } from "vue";
+import CSegmentError from "./CSegmentError.vue";
 
 const form = useTemplateRef<HTMLFormElement>("form");
 const disabled = ref(false);
@@ -55,7 +56,7 @@ async function submit(): Promise<void> {
     </label>
     <label><input v-model="feed" type="checkbox" :disabled /> Feed</label>
     <button :disabled>Print</button>
-    <p v-if="error" class="error">{{ error }}</p>
+    <CSegmentError :message="error" />
   </form>
 </template>
 
@@ -76,10 +77,4 @@ fieldset {
   flex-direction: column;
   border: none;
 }
-
-.error {
-  background-color: #fdd;
-  color: #400;
-  padding: 0 2px;
-}
 </style>
diff --git a/showbits-thermal-printer-ui/src/components/CSegmentError.vue b/showbits-thermal-printer-ui/src/components/CSegmentError.vue
new file mode 100644
index 0000000..d8564ba
--- /dev/null
+++ b/showbits-thermal-printer-ui/src/components/CSegmentError.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const { message } = defineProps<{ message?: string }>();
+</script>
+
+<template>
+  <p v-if="message">{{ message }}</p>
+</template>
+
+<style scoped>
+p {
+  background-color: #fdd;
+  color: #400;
+  padding: 0 2px;
+}
+</style>
diff --git a/showbits-thermal-printer-ui/src/components/CSegmentText.vue b/showbits-thermal-printer-ui/src/components/CSegmentText.vue
index 303a40b..5a4304e 100644
--- a/showbits-thermal-printer-ui/src/components/CSegmentText.vue
+++ b/showbits-thermal-printer-ui/src/components/CSegmentText.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, type StyleValue, useTemplateRef } from "vue";
+import CSegmentError from "./CSegmentError.vue";
 
 const form = useTemplateRef<HTMLFormElement>("form");
 const disabled = ref(false);
@@ -73,7 +74,7 @@ async function submit(): Promise<void> {
       <label><input v-model="feed" type="checkbox" :disabled /> Feed</label>
     </fieldset>
     <button :disabled>Print</button>
-    <p v-if="error" class="error">{{ error }}</p>
+    <CSegmentError :message="error" />
   </form>
 </template>
 
@@ -98,10 +99,4 @@ fieldset {
   flex-direction: column;
   border: none;
 }
-
-.error {
-  background-color: #fdd;
-  color: #400;
-  padding: 0 2px;
-}
 </style>