Vue 2.7 refresh

.nvmrc

@@ -0,0 +1 @@
+12

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"]
+  presets: ["@vue/cli-plugin-babel/preset"],
 };

package.json

@@ -11,27 +11,27 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.30",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@fortawesome/vue-fontawesome": "^0.1.10",
-    "@tonaljs/tonal": "^4.2.1",
-    "buefy": "^0.9.2",
-    "core-js": "^3.6.5",
-    "vue": "^2.6.12"
+    "@tonaljs/tonal": "^4.10.0",
+    "buefy": "^0.9.22",
+    "core-js": "^3.28.0",
+    "vue": "^2.7.14",
+    "webpack": "^5.75.0"
   },
   "devDependencies": {
-    "@fullhuman/vue-cli-plugin-purgecss": "~2.2.0",
-    "@vue/cli-plugin-babel": "^4.5.4",
-    "@vue/cli-plugin-eslint": "^4.5.4",
-    "@vue/cli-service": "^4.5.4",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-vue": "^6.2.2",
-    "node-sass": "^4.9.0",
-    "prettier": "^1.19.1",
-    "sass": "^1.26.10",
-    "sass-loader": "^8.0.2",
-    "vue-cli-plugin-buefy": "~0.3.7",
-    "vue-template-compiler": "^2.6.12"
+    "@fullhuman/vue-cli-plugin-purgecss": "~5.0.0",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "@vue/eslint-config-prettier": "^7.1.0",
+    "eslint": "^8.34.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-vue": "^9.9.0",
+    "node-sass": "^8.0.0",
+    "prettier": "^2.8.4",
+    "sass": "^1.58.3",
+    "sass-loader": "^13.2.0",
+    "vue-cli-plugin-buefy": "~0.3.8",
+    "vue-template-compiler": "^2.7.14"
   },
   "eslintConfig": {
     "root": true,
@@ -43,10 +43,19 @@
       "eslint:recommended",
       "@vue/prettier"
     ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
+    "rules": {
+      "vue/multi-word-component-names": [
+        "error",
+        {
+          "ignores": [
+            "Editor",
+            "Embed",
+            "Fretboard",
+            "Tuning"
+          ]
+        }
+      ]
+    }
   },
   "browserslist": [
     "> 1%",

src/App.vue

@@ -26,10 +26,10 @@ export default {
     };
   },
   methods: {
-    add: function() {
+    add: function () {
       this.editors.push(Math.max(...this.editors) + 1);
     },
-    remove: function(editor) {
+    remove: function (editor) {
       const index = this.editors.indexOf(editor);
       if (index > -1) {
         this.editors.splice(index, 1);

src/components/Editor.vue

@@ -9,7 +9,7 @@
               <b-autocomplete
                 v-model="usr_tuning"
                 :data="tuning_search"
-                @select="option => (selected = option.name)"
+                @select="(option) => (selected = option.name)"
                 group-field="instrument"
                 group-options="tunings"
                 open-on-focus
@@ -30,7 +30,11 @@
 
             <!-- Tonic + Scale -->
             <b-field label="Tonic:">
-              <b-input v-model="scale.tonic" icon="music" style="max-width: 100px"></b-input>
+              <b-input
+                v-model="scale.tonic"
+                icon="music"
+                style="max-width: 100px"
+              ></b-input>
             </b-field>
             <b-field label="Scale:">
               <b-autocomplete
@@ -46,15 +50,22 @@
             <!-- Settings -->
             <b-field>
               <template slot="label">
-                <span style="color: transparent; user-select:none;">More</span>
+                <span style="color: transparent; user-select: none">More</span>
               </template>
 
               <b-dropdown append-to-body aria-role="menu" trap-focus>
-                <b-button class="button" slot="trigger" icon-left="cog">Settings</b-button>
+                <b-button class="button" slot="trigger" icon-left="cog"
+                  >Settings</b-button
+                >
 
-                <b-dropdown-item aria-role="menu-item" :focusable="false" custom paddingless>
+                <b-dropdown-item
+                  aria-role="menu-item"
+                  :focusable="false"
+                  custom
+                  paddingless
+                >
                   <form action>
-                    <div class="modal-card" style="width:300px;">
+                    <div class="modal-card" style="width: 300px">
                       <section class="modal-card-body">
                         <b-field label="Frets">
                           <b-numberinput
@@ -66,19 +77,29 @@
                         </b-field>
                         <b-field label="Notation">
                           <b-field>
-                            <b-radio-button v-model="sharps" native-value="sharps">
+                            <b-radio-button
+                              v-model="sharps"
+                              native-value="sharps"
+                            >
                               <span>#</span>
                             </b-radio-button>
 
-                            <b-radio-button v-model="sharps" native-value="flats">
+                            <b-radio-button
+                              v-model="sharps"
+                              native-value="flats"
+                            >
                               <span>b</span>
                             </b-radio-button>
                           </b-field>
                         </b-field>
                         <!-- <b-checkbox>Show piano</b-checkbox>-->
                       </section>
                       <footer class="modal-card-foot">
-                        <b-button @click="$emit('remove-fretboard')" icon-left="trash">remove fretboard</b-button>
+                        <b-button
+                          @click="$emit('remove-fretboard')"
+                          icon-left="trash"
+                          >remove fretboard</b-button
+                        >
                       </footer>
                     </div>
                   </form>
@@ -90,8 +111,14 @@
         </div>
       </div>
 
-      <div class="card-image" style="text-align:center; overflow-x: auto;">
-        <Fretboard :tuning="tuning" :notes="notes" :sharps="sharps" :frets="frets" :root="root" />
+      <div class="card-image" style="text-align: center; overflow-x: auto">
+        <Fretboard
+          :tuning="tuning"
+          :notes="notes"
+          :sharps="sharps"
+          :frets="frets"
+          :root="root"
+        />
       </div>
     </div>
   </div>
@@ -104,8 +131,7 @@ import { Note, Scale, Midi, ScaleType } from "@tonaljs/tonal";
 import { Tunings } from "../tunings.js";
 
 var ALL_SCALES = [];
-for (var scale of ScaleType.all())
-{
+for (var scale of ScaleType.all()) {
   ALL_SCALES.push(scale.name);
   ALL_SCALES.push(...scale.aliases);
 }
@@ -114,40 +140,36 @@ export default {
   name: "Editor",
 
   components: {
-    Fretboard
+    Fretboard,
     // NoteSelect,
   },
 
-  data: function() {
+  data: function () {
     return {
       usr_tuning: localStorage.getItem("tuning") || "E A D G",
       sharps: "sharps",
       frets: 18,
-      scale: { tonic: "A", type: "minor pentatonic" }
+      scale: { tonic: "A", type: "minor pentatonic" },
     };
   },
 
   computed: {
-    tuning: function() {
+    tuning: function () {
       if (!this.usr_tuning) return [];
-      return this.usr_tuning
-        .trim()
-        .split(" ")
-        .map(Note.chroma)
-        .reverse();
+      return this.usr_tuning.trim().split(" ").map(Note.chroma).reverse();
     },
-    root: function() {
+    root: function () {
       return Note.chroma(this.scale.tonic);
     },
-    notes: function() {
+    notes: function () {
       return this.scale_info.notes.map(Note.chroma);
     },
-    scale_info: function() {
+    scale_info: function () {
       let name = this.scale.tonic + " " + this.scale.type;
       return Scale.get(name);
     },
-    scale_search: function() {
-      return ALL_SCALES.filter(option => {
+    scale_search: function () {
+      return ALL_SCALES.filter((option) => {
         return (
           option
             .toString()
@@ -158,9 +180,9 @@ export default {
     },
     tuning_search() {
       const newData = [];
-      Tunings.forEach(element => {
+      Tunings.forEach((element) => {
         const items = element.tunings.filter(
-          item =>
+          (item) =>
             item.tuning.toLowerCase().indexOf(this.usr_tuning.toLowerCase()) >=
             0
         );
@@ -169,7 +191,7 @@ export default {
         }
       });
       return newData;
-    }
+    },
   },
 
   methods: {
@@ -178,21 +200,21 @@ export default {
       localStorage.setItem("tuning", this.usr_tuning);
     },
     normalize(notes) {
-      return notes.map(x => x % 12);
+      return notes.map((x) => x % 12);
     },
     toname(x) {
       return Midi.midiToNoteName(x, {
         sharps: this.sharps == "sharps",
-        pitchClass: true
+        pitchClass: true,
       });
     },
     scale_input(x, y) {
       console.log(y);
       if (x == "") {
         return;
       }
-    }
-  }
+    },
+  },
 };
 </script>
 

src/components/Fretboard.vue

@@ -23,7 +23,7 @@
         v-for="inlay in inlay_polys"
         :key="'inlay_' + inlay.fret"
         :points="inlay.points"
-        style="fill:#eee"
+        style="fill: #eee"
       />
 
       <!-- string lines -->
@@ -179,13 +179,13 @@ export default {
   },
 
   computed: {
-    width: function() {
+    width: function () {
       return this.fretpos(this.frets - 1);
     },
-    height: function() {
+    height: function () {
       return (this.tuning.length - 1) * this.string_spacing;
     },
-    strings: function() {
+    strings: function () {
       let result = [];
       this.tuning.forEach((tuning, string) => {
         // find notes
@@ -219,7 +219,7 @@ export default {
       });
       return result;
     },
-    fret_lines: function() {
+    fret_lines: function () {
       let lines = [];
       for (let i = 1; i < this.frets; i++) {
         lines.push({
@@ -233,7 +233,7 @@ export default {
         lines: lines,
       };
     },
-    inlay_polys: function() {
+    inlay_polys: function () {
       let result = [];
       if (!this.tuning.length) return result;
       for (let fret of this.inlays) {

src/components/Tuning.vue

@@ -21,7 +21,7 @@
                   custom
                   paddingless
                 >
-                  <div class="modal-card" style="width:300px;">
+                  <div class="modal-card" style="width: 300px">
                     <section class="modal-card-body">
                       [Todo] list common tunings
                     </section>
@@ -95,7 +95,7 @@
       </div>
     </div>
 
-    <div class="card-image" style="text-align:center">
+    <div class="card-image" style="text-align: center">
       <Fretboard
         :tuning="tuning"
         :notes="notes"
@@ -117,7 +117,7 @@ export default {
     Fretboard,
   },
 
-  data: function() {
+  data: function () {
     return {
       usr_tuning: "E A D G",
       sharps: "sharps",
@@ -128,21 +128,17 @@ export default {
   },
 
   computed: {
-    tuning: function() {
-      return this.usr_tuning
-        .trim()
-        .split(" ")
-        .map(Note.chroma)
-        .reverse();
+    tuning: function () {
+      return this.usr_tuning.trim().split(" ").map(Note.chroma).reverse();
     },
-    notes: function() {
+    notes: function () {
       return this.scale_info.notes.map(Note.chroma);
     },
-    scale_info: function() {
+    scale_info: function () {
       let name = this.scale.tonic + " " + this.scale.type;
       return Scale.get(name);
     },
-    chromatic: function() {
+    chromatic: function () {
       return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(this.toname);
     },
     scale_search() {