From 24c00be38ffffe5fc10c0c6ba853787475ffe8fd Mon Sep 17 00:00:00 2001
From: Brian DeRocher <brian@derocher.org>
Date: Sun, 17 Nov 2024 15:01:11 -0500
Subject: [PATCH] Get color working.

---
 src/components/Sticker.vue |  8 ++++----
 src/views/StickerView.vue  | 14 ++++++++++----
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/Sticker.vue b/src/components/Sticker.vue
index 1269128..17f07d5 100644
--- a/src/components/Sticker.vue
+++ b/src/components/Sticker.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import QRCode from "@/components/QRCode.vue";
-import {computed} from "vue";
+import {computed, reactive} from "vue";
 
 const {
-  layout,
+  layout, color,
   message1, message2,
   message3, message4,
 } = defineProps([
-  'layout',
+  'layout', 'color',
   'message1', 'message2',
   'message3', 'message4',
 ])
@@ -63,7 +63,7 @@ const layout4Class = computed(() => ({
 }
 .sticker {
   aspect-ratio: 6 / 1;
-  background-color: darkblue;
+  background-color: v-bind(color);
   display: flex;
   overflow: hidden;
   .content {
diff --git a/src/views/StickerView.vue b/src/views/StickerView.vue
index 09890f5..f687b30 100644
--- a/src/views/StickerView.vue
+++ b/src/views/StickerView.vue
@@ -14,7 +14,7 @@ import RadioButton from 'primevue/radiobutton';
 import Select from 'primevue/select';
 import Sticker from '@/components/Sticker.vue';
 import ToggleSwitch from 'primevue/toggleswitch';
-import { ref } from 'vue';
+import {computed, ref} from 'vue';
 
 const checked = ref(true);
 const selectedCountry = ref(null);
@@ -53,6 +53,11 @@ message3.value = "m3";
 const message4 = defineModel('message4');
 message4.value = "";
 const color = defineModel('background-color');
+color.value = '000088';
+
+const color2 = computed(() => {
+  return '#' + color.value;
+})
 
 function onFormSubmit() {
   return {};
@@ -65,14 +70,15 @@ function onFormSubmit() {
     <div id="StickerWrapper">
       <p>6-inch sticker</p>
       <Sticker
-        id="Sticker1" v-bind:layout
+        id="Sticker1"
+        v-bind:layout v-bind:color="color2"
         v-bind:message1 v-bind:message2
         v-bind:message3 v-bind:message4
       />
       <p>8-inch sticker</p>
       <Sticker
         id="Sticker2"
-        v-bind:layout
+        v-bind:layout v-bind:color="color2"
         v-bind:message1 v-bind:message2
         v-bind:message3 v-bind:message4
       />
@@ -131,7 +137,7 @@ function onFormSubmit() {
               <div class="divider" />
 
               <div class="col-span-12 md:col-span-6">
-                <label for="email2">Background Color</label>
+                <label for="email2">Background Color {{color}}</label>
                 <ColorPicker v-model="color" />
               </div>
               <div class="col-span-12 md:col-span-6">