From f327547570e445e2ba2abe8edb1a50a3a3d21d4f Mon Sep 17 00:00:00 2001
From: Joscha <joscha@plugh.de>
Date: Mon, 3 Mar 2025 17:49:09 +0100
Subject: [PATCH] Make forms more consistent

The form elements now all become disabled while printing, and the code
has a little more whitespace.
---
 .../src/components/CSegmentCalendar.vue               |  8 ++++++--
 .../src/components/CSegmentCells.vue                  |  5 +++++
 .../src/components/CSegmentEgg.vue                    |  8 +++++++-
 .../src/components/CSegmentText.vue                   | 11 +++++------
 .../src/components/CSegmentTictactoe.vue              |  3 +++
 5 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/showbits-thermal-printer-ui/src/components/CSegmentCalendar.vue b/showbits-thermal-printer-ui/src/components/CSegmentCalendar.vue
index 3f6f39e..30706ce 100644
--- a/showbits-thermal-printer-ui/src/components/CSegmentCalendar.vue
+++ b/showbits-thermal-printer-ui/src/components/CSegmentCalendar.vue
@@ -22,15 +22,19 @@ function submit() {
 <template>
   <form @submit.prevent="submit">
     <h2>Calendar</h2>
+
     <label class="wide">
       Year:
-      <input v-model="year" type="number" />
+      <input v-model="year" type="number" :disabled />
     </label>
+
     <label class="wide">
       Month:
-      <input v-model="month" type="number" min="1" max="12" />
+      <input v-model="month" type="number" min="1" max="12" :disabled />
     </label>
+
     <label><input v-model="feed" type="checkbox" :disabled /> Feed</label>
+
     <button :disabled>Print</button>
     <CSegmentError :message="error" />
   </form>
diff --git a/showbits-thermal-printer-ui/src/components/CSegmentCells.vue b/showbits-thermal-printer-ui/src/components/CSegmentCells.vue
index 3b2425b..0d8bcb3 100644
--- a/showbits-thermal-printer-ui/src/components/CSegmentCells.vue
+++ b/showbits-thermal-printer-ui/src/components/CSegmentCells.vue
@@ -25,6 +25,7 @@ function submit() {
 <template>
   <form @submit.prevent="submit">
     <h2>Cellular Automaton</h2>
+
     <label class="wide">
       Rule:
       <input
@@ -36,20 +37,24 @@ function submit() {
         :disabled
       />
     </label>
+
     <label class="wide">
       Rows:
       <input v-model="rows" type="number" min="1" max="1024" :disabled />
     </label>
+
     <label class="wide">
       Scale:
       <input v-model="scale" type="number" min="1" max="16" :disabled />
     </label>
+
     <div class="wide">
       <label>
         <input v-model="showRule" type="checkbox" :disabled /> Show rule
       </label>
       <label><input v-model="feed" type="checkbox" :disabled /> Feed</label>
     </div>
+
     <button :disabled>Print</button>
     <CSegmentError :message="error" />
   </form>
diff --git a/showbits-thermal-printer-ui/src/components/CSegmentEgg.vue b/showbits-thermal-printer-ui/src/components/CSegmentEgg.vue
index 10ff9b7..6ebc441 100644
--- a/showbits-thermal-printer-ui/src/components/CSegmentEgg.vue
+++ b/showbits-thermal-printer-ui/src/components/CSegmentEgg.vue
@@ -21,12 +21,14 @@ function submit() {
 <template>
   <form @submit.prevent="submit">
     <h2>Easter Egg</h2>
+
     <svg viewBox="-2 0 4 6">
       <path
         fill="#000"
         d="M0,0 C1,0,2,2,2,3.5 S1,6,0,6 S-2,5,-2,3.5 S-1,0,0,0"
       />
     </svg>
+
     <label class="wide">
       Seed:
       <input
@@ -36,17 +38,21 @@ function submit() {
         max="9223372036854775807"
         step="1"
         placeholder="random"
+        :disabled
       />
     </label>
+
     <label class="wide">
       Mode:
-      <select v-model="mode">
+      <select v-model="mode" :disabled>
         <option value="random">Random</option>
         <option value="good">Good</option>
         <option value="bad">Bad</option>
       </select>
     </label>
+
     <label><input v-model="feed" type="checkbox" :disabled /> Feed</label>
+
     <button :disabled>Print</button>
     <CSegmentError :message="error" />
   </form>
diff --git a/showbits-thermal-printer-ui/src/components/CSegmentText.vue b/showbits-thermal-printer-ui/src/components/CSegmentText.vue
index 375c7c3..7046bea 100644
--- a/showbits-thermal-printer-ui/src/components/CSegmentText.vue
+++ b/showbits-thermal-printer-ui/src/components/CSegmentText.vue
@@ -34,6 +34,7 @@ function submit() {
 <template>
   <form ref="form" @submit.prevent="submit">
     <h2>Text</h2>
+
     <!-- For some reason one col = 2 characters. -->
     <textarea
       v-model="text"
@@ -43,13 +44,15 @@ function submit() {
       :disabled
       @keypress="textareaKeypress"
     ></textarea>
-    <fieldset class="wide">
+
+    <div class="wide">
       <label>
         <input v-model="forceWrap" type="checkbox" :disabled />
         Force-Wrap
       </label>
       <label><input v-model="feed" type="checkbox" :disabled /> Feed</label>
-    </fieldset>
+    </div>
+
     <button :disabled>Print</button>
     <CSegmentError :message="error" />
   </form>
@@ -75,8 +78,4 @@ textarea {
   display: flex;
   flex-direction: column;
 }
-
-fieldset {
-  border: none;
-}
 </style>
diff --git a/showbits-thermal-printer-ui/src/components/CSegmentTictactoe.vue b/showbits-thermal-printer-ui/src/components/CSegmentTictactoe.vue
index f527f8e..c67a6cd 100644
--- a/showbits-thermal-printer-ui/src/components/CSegmentTictactoe.vue
+++ b/showbits-thermal-printer-ui/src/components/CSegmentTictactoe.vue
@@ -17,6 +17,7 @@ function submit() {
 <template>
   <form @submit.prevent="submit">
     <h2>Tic Tac Toe</h2>
+
     <svg viewBox="0 0 384 384">
       <path
         stroke="#000"
@@ -24,7 +25,9 @@ function submit() {
         d="M128,0V384 M256,0V384 M0,128H384 M0,256H384"
       />
     </svg>
+
     <label><input v-model="feed" type="checkbox" :disabled /> Feed</label>
+
     <button :disabled>Print</button>
     <CSegmentError :message="error" />
   </form>