Support transposition

src/components/ChordChart.vue

@@ -49,11 +49,15 @@ import { computed, inject, ref, watch } from 'vue';
 import { ChordProParser, Song } from 'chordsheetjs';
 import ChordChartBodyParagraph from './ChordChartBodyParagraph.vue';
 
-defineProps({
+const props = defineProps({
   columns: {
     type: Number,
     default: 1,
   },
+  transposition: {
+    type: Number,
+    default: 0,
+  },
 });
 
 
@@ -77,6 +81,13 @@ watch(chordProInput, (newValue) => {
     console.error(err);
   }
 }, { immediate: true });
+
+watch(() => props.transposition, (newValue, oldValue) => {
+  if (song.value) {
+    const difference = newValue - oldValue;
+    song.value = song.value.transpose(difference);
+  }
+}, { immediate: true });
 </script>
 
 <style scoped>

src/views/HomeView.vue

@@ -1,32 +1,52 @@
 <template>
   <main>
-    <form class="no-print">
+    <form
+      class="no-print"
+      @submit.prevent
+    >
       <label for="chordpro-input">Chord chart in ChordPro format:</label>
       <textarea
         ref="textareaRef"
         v-model="input"
         id="chordpro-input"
         rows="10"
       />
+
+      <label for="chordpro-transpose">Transpose: </label>
+      <input
+        type="number"
+        id="chordpro-transpose"
+        v-model="transposition"
+        max="12"
+        min="-12"
+        required
+      >
     </form>
     <ChordChart
+      :transposition="validatedTransposition"
       @click="onChordChartClick"
     />
   </main>
 </template>
 
 <script setup>
-import { inject, defineAsyncComponent, provide, ref, watch } from 'vue';
+import { computed, inject, defineAsyncComponent, provide, ref, watch } from 'vue';
 const ChordChart = defineAsyncComponent(() => import('../components/ChordChart.vue'));
 const input = inject('chordProInput');
 const textareaRef = ref(null);
 const caretPosition = ref(0);
+const transposition = ref(0);
 provide('caretPosition', caretPosition);
 
 watch(input, () => {
   caretPosition.value = getCaretPosition();
 });
 
+const validatedTransposition = computed(() => {
+  const transpositionWithDefault = transposition.value || 0;
+  return Math.min(12, Math.max(-12, transpositionWithDefault || 0));
+});
+
 function onChordChartClick(event) {
   const closestElementWithIndex = event.target.closest('[data-index]');
   if (closestElementWithIndex) {
@@ -83,4 +103,8 @@ textarea {
   font-size: 14px;
   width: 100%;
 }
+
+input:invalid {
+  border-color: red;
+}
 </style>