feat: songbooks components for line and tabs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hip-note",
-  "version": "1.0.2",
+  "version": "1.1.2",
   "author": "Guillaume Fay",
   "description": "Markdown editor with templates for taking notes, writing articles, generating resumes and much more!",
   "license": "MIT",

src/renderer/App.vue

@@ -51,13 +51,9 @@
 
 <style scoped>
 @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons');
-
 .no-padding {
   padding: 0;
 }
-.footer-border {
-  border-top: 1px
-}
 .toolbar-title {
   width: 500px;
 }

src/renderer/components/editor/components/sb-line.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="sb-line">
+    <div 
+      v-for="({chord, text, leftPadding}, index) in fragments" 
+      :key="index"
+      :class="{'left-padding': leftPadding}"
+      class="sb-fragment">
+      <div class="sb-chord primary--text">
+        {{ chord }}
+      </div>
+      <div class="sb-text">
+        {{ text }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.sb-line {
+  display: flex;
+  margin: 5px 5px 5px 20px;
+}
+.sb-chord {
+  font-weight: bold;
+  height: 21px;
+}
+.left-padding {
+  padding-left: 5px;
+}
+.sb-text {
+  justify-self: baseline;
+}
+.sb-fragment {
+  display: flex;
+  flex-direction: column;
+}
+</style>
+
+<script>
+export default {
+  props: {
+    l: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    fragments() {
+      const splitedLine = this.l.split('_')
+      const fragments = [{ text: splitedLine[0] }]
+      for (let i = 1; i < splitedLine.length; i += 2) {
+        fragments.push({
+            chord: splitedLine[i],
+            text: splitedLine[i + 1],
+            leftPadding: splitedLine[i - 1].slice(-1) === ' '
+          })
+      }
+
+      return fragments
+    }
+  }
+};
+</script>

src/renderer/components/editor/components/sb-tab.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="sb-tab">
+    <div class="sb-tab-header">
+      <div 
+        v-for="string in stringIndexes.slice().reverse()" 
+        :key="string"
+      >{{ `${string}|` }}
+      </div>
+    </div>
+    <div 
+      v-for="({chord, notes}, index) in mesures" 
+      :key="index">
+      <div class="sb-chord primary--text">
+        {{ chord }}
+      </div>
+      <div>
+        <div 
+          v-for="(note, index) in notes.slice().reverse()" 
+          :key="index">
+          {{ `${note}|` }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.sb-tab {
+  font-family: monospace;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 5px 5px 5px 20px;
+}
+.sb-tab-header {
+  margin-top: 21px;
+}
+.sb-chord {
+  font-weight: bold;
+  height: 21px;
+}
+</style>
+
+<script>
+export default {
+  props: {
+    t: {
+      type: String,
+      default: ''
+    },
+  },
+  data() {
+    return {
+      stringIndexes: ['E', 'A', 'D', 'G', 'B', 'e']
+    }
+  },
+  computed: {
+    mesures() {
+      const mesures = this.t.split('|').reduce((acc, rawMesure) => {
+        const parsedMesure = {}
+        if (rawMesure.indexOf('_') > -1) {
+          parsedMesure.chord = rawMesure.substring(rawMesure.indexOf('_') + 1, rawMesure.lastIndexOf('_'))
+        }
+
+        parsedMesure.notes = rawMesure
+          .substring(rawMesure.lastIndexOf('_'))
+          .split('-')
+          .reduce((acc, rawNotes) => {
+            const timeArray = ['', '', '', '', '', '']
+            const stringRe = /([EADGBe])([0-9hp/]+)/g
+            let result
+            let maxSize = 1
+            while ((result = stringRe.exec(rawNotes)) !== null) {
+              const stringIndex = this.stringIndexes.indexOf(result[1])
+              const note = `-${result[2]}-`
+              if (note.length > maxSize) {
+                maxSize = note.length
+              }
+              timeArray[stringIndex] = note
+            }
+
+
+            return timeArray.map((string, index) => {
+              let timeStr = string.toString()
+              if (string.length < maxSize) {
+                timeStr = string.padEnd(maxSize, '-')
+              }
+
+              const preStr = acc && acc[index]
+
+              if (preStr) {
+                return `${preStr}${timeStr}`
+              }
+
+              return timeStr
+            })
+          }, [])
+
+        acc.push(parsedMesure)
+
+        return acc
+
+      }, [])
+
+      return mesures
+    }
+  }
+};
+</script>