From ad1ce948b7276376c4aad5c30f2e72e291d81a2e Mon Sep 17 00:00:00 2001
From: kevin olson <acidjazz@gmail.com>
Date: Mon, 4 Nov 2024 16:00:31 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20uppercase=20and=20lowercase=20su?=
 =?UTF-8?q?pport=20for=20labels?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/pages/label/[type]/[mg].vue | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/pages/label/[type]/[mg].vue b/app/pages/label/[type]/[mg].vue
index 1af3f58..b482017 100644
--- a/app/pages/label/[type]/[mg].vue
+++ b/app/pages/label/[type]/[mg].vue
@@ -3,20 +3,27 @@ definePageMeta({ layout: 'bare' })
 const dims = { width: 45, height: 14 }
 const route = useRoute()
 const { type, mg } = route.params
+// label is type with the underscore at the end removed
+const label = computed(() => type ? type.replace(/_$/, '') : '')
+// uppercase is true if there is an underscore at the end of type
+const uppercase = computed(() => type ? type.endsWith('_') : false)
 </script>
 
 <template>
-  <div class="w-screen h-screen flex items-center justify-center">
+  <div class="w-screen h-screen flex items-center justify-center bg-green-500">
     <div
-      class="cut-here flex flex-col justify-center items-center space-y-2"
+      class="cut-here flex flex-col justify-center items-center space-y-2 bg-gray-950"
       :style="`width: ${dims.width * 5}mm; height: ${dims.height * 5}mm;`"
     >
-      <div class="flex items-center space-x-3 h-52 w-full">
+      <div class="flex items-center space-x-3 h-52 w-full px-3">
         <logo-bio class="w-52 h-52" />
         <div class="flex flex-col w-full flex-1">
           <logo-text class="text-9xl" large />
           <div class="flex font-extrabold w-full flex-1">
-            <span class="uppercase w-full flex-1 text-7xl text-sky-900 text-center bg-sky-200 py-1 px-6"> {{ type }} </span>
+            <span
+              :class="{ uppercase }"
+              class="w-full flex-1 text-7xl text-sky-900 text-center bg-sky-200 py-1 px-6"
+            > {{ label }} </span>
             <div v-if="mg !== 'none'" class="text-sky-200 bg-sky-900 py-1 px-6 flex items-end">
               <div class="text-7xl"> {{ mg }}</div>
               <div>mg </div>