Get 4 layouts mostly working.

src/components/Sticker.vue

@@ -1,18 +1,60 @@
 <script setup lang="ts">
 import QRCode from "@/components/QRCode.vue";
+import {computed} from "vue";
 
-const { message1, message2 } = defineProps(['message1', 'message2'])
+const {
+  layout,
+  message1, message2,
+  message3, message4,
+} = defineProps([
+  'layout',
+  'message1', 'message2',
+  'message3', 'message4',
+])
+const layout1Class = computed(() => ({
+  hidden: layout !== 'layout1',
+  layout1: layout === 'layout1',
+}))
+const layout2Class = computed(() => ({
+  hidden: layout !== 'layout2',
+  layout2: layout === 'layout2',
+}))
+const layout3Class = computed(() => ({
+  hidden: layout !== 'layout3',
+  layout3: layout === 'layout3',
+}))
+const layout4Class = computed(() => ({
+  hidden: layout !== 'layout4',
+  layout4: layout === 'layout4',
+}))
 </script>
 <template>
   <div class="sticker">
     <QRCode class="qr-code"></QRCode>
-    <div class="message">{{ message1 }}</div>
+    <div class="content">
-    <div class="message">{{ message2 }}</div>
+      <div v-bind:class="layout1Class">
+        <div class="message">{{ message1 }}</div>
+      </div>
+      <div v-bind:class="layout2Class">
+        <div class="message">{{ message1 }}</div>
+        <div class="message">{{ message2 }}</div>
+      </div>
+      <div v-bind:class="layout3Class">
+        <div class="message">{{ message1 }}</div>
+        <div class="message">{{ message2 }}</div>
+        <div class="message">message3</div>
+      </div>
+      <div v-bind:class="layout4Class">
+        <div class="message">{{ message1 }}</div>
+        <div class="message">{{ message2 }}</div>
+        <div class="message">{{ message3 }}</div>
+        <div class="message">{{ message4 }}</div>
+      </div>
+    </div>
   </div>
 </template>
 <style scoped>
 .message {
-  font-size: 2rem;
   color: white;
   font-weight: bold;
 }
@@ -22,8 +64,49 @@ const { message1, message2 } = defineProps(['message1', 'message2'])
 .sticker {
   aspect-ratio: 6 / 1;
   background-color: darkblue;
-  //outline: solid 1px red;
   display: flex;
-  //padding: 10px;
+  overflow: hidden;
+  .content {
+    padding: 5px;
+    width: 100%;
+    > div > div {
+      outline: 1px solid #CCC;
+    }
+    .layout1 {
+      font-size: 140%;
+      height: 100%;
+      > div {
+        height: 100%;
+      }
+    }
+    .layout2 {
+      display: flex;
+      flex-direction: column;
+      font-size: 70%;
+      gap: 5px;
+      height: 100%;
+      > div {
+        flex: auto 1 0;
+      }
+    }
+    .layout3 {
+      display: flex;
+      gap: 5px;
+      height: 100%;
+      > div {
+        width: 33%;
+      }
+    }
+    .layout4 {
+      /* TODO: overflow issue.  Turn on outline to see. */
+      display: grid;
+      font-size: 70%;
+      grid-template-columns: 50% 50%;
+      gap: 5px;
+      //grid-auto-rows: minmax(100px, auto);
+      //grid-auto-rows: auto;
+      height: 100%;
+    }
+  }
 }
 </style>

src/views/StickerView.vue

@@ -43,10 +43,15 @@ const resolver = () => {
 };
 
 const layout = defineModel('layout');
+layout.value = 'layout1';
 const message1 = defineModel('message1');
 message1.value = "I SUPPORT M4A";
 const message2 = defineModel('message2');
-message2.value = "";
+message2.value = "m2";
+const message3 = defineModel('message3');
+message3.value = "m3";
+const message4 = defineModel('message4');
+message4.value = "";
 const color = defineModel('background-color');
 
 function onFormSubmit() {
@@ -59,9 +64,18 @@ function onFormSubmit() {
     <h1>Sticker</h1>
     <div id="StickerWrapper">
       <p>6-inch sticker</p>
-      <Sticker id="Sticker1" v-bind:message1=message1 v-bind:message2=message2 />
+      <Sticker
+        id="Sticker1" v-bind:layout
+        v-bind:message1 v-bind:message2
+        v-bind:message3 v-bind:message4
+      />
       <p>8-inch sticker</p>
-      <Sticker id="Sticker2" v-bind:message1=message1 v-bind:message2=message2 />
+      <Sticker
+        id="Sticker2"
+        v-bind:layout
+        v-bind:message1 v-bind:message2
+        v-bind:message3 v-bind:message4
+      />
     </div>
     <Button type="submit" severity="secondary" label="Take a snapshot" />
     <Card>
@@ -73,22 +87,22 @@ function onFormSubmit() {
           <div class="bg-surface-50 dark:bg-surface-950 px-6 py-10 md:px-12 lg:px-5">
             <div class="grid grid-cols-12 gap-4">
               <div class="col-span-12">
-                <label for="nickname2">Layout</label>
+                <label for="nickname2">Layout {{layout}}</label>
                 <div class="flex flex-wrap gap-4">
                   <div class="flex items-center gap-2">
-                    <RadioButton v-model="layout" inputId="layout1" name="pizza" value="Cheese" />
+                    <RadioButton v-model="layout" inputId="layout1" name="layout" value="layout1" />
                     <label for="layout1"><IconLayout1Vue /></label>
                   </div>
                   <div class="flex items-center gap-2">
-                    <RadioButton v-model="layout" inputId="layout2" name="pizza" value="Mushroom" />
+                    <RadioButton v-model="layout" inputId="layout2" name="layout" value="layout2" />
                     <label for="layout2"><IconLayout2Vue /></label>
                   </div>
                   <div class="flex items-center gap-2">
-                    <RadioButton v-model="layout" inputId="layout3" name="pizza" value="Pepper" />
+                    <RadioButton v-model="layout" inputId="layout3" name="layout" value="layout3" />
                     <label for="layout3"><IconLayout3Vue /></label>
                   </div>
                   <div class="flex items-center gap-2">
-                    <RadioButton v-model="layout" inputId="layout4" name="pizza" value="Onion" />
+                    <RadioButton v-model="layout" inputId="layout4" name="layout" value="layout4" />
                     <label for="layout4"><IconLayout4Vue /></label>
                   </div>
                 </div>
@@ -102,7 +116,16 @@ function onFormSubmit() {
               </div>
               <div class="col-span-12 md:col-span-6">
                 <label for="message2">Message 2</label>
-                <InputText class="w-full" id="message2" name="message1" type="text" v-model="message2" fluid />
+                <InputText class="w-full" id="message2" name="message2" type="text" v-model="message2" fluid />
+              </div>
+
+              <div class="col-span-12 md:col-span-6">
+                <label for="message1">Message 3</label>
+                <InputText class="w-full" id="message3" name="message3" type="text" v-model="message3" fluid />
+              </div>
+              <div class="col-span-12 md:col-span-6">
+                <label for="message4">Message 4</label>
+                <InputText class="w-full" id="message4" name="message4" type="text" v-model="message4" fluid />
               </div>
 
               <div class="divider" />