🎨 uppercase and lowercase support for labels

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>