Fill in any missing key binds with &none

1 files changed, 14 insertions, 5 deletions

diff --git a/application/components/keyboard-layout.vue b/application/components/keyboard-layout.vue
index 3680f7c..48102be 100644
--- a/application/components/keyboard-layout.vue
+++ b/application/components/keyboard-layout.vue
@@ -8,9 +8,8 @@
       :rotation="rotation(key)"
       :size="size(key)"
       :label="key.label"
-      :parsed="keys[i]"
-      :value="keys[i].value"
-      :params="keys[i].params"
+      :value="normalized[i].value"
+      :params="normalized[i].params"
       @update="handleUpdateBind(i, $event)"
     />
   </div>
@@ -25,6 +24,16 @@ export default {
   components: {
     'key-thing': Key,
   },
+  computed: {
+    normalized() {
+      return this.layout.map((_, i) => (
+        this.keys[i] || {
+          value: '&none',
+          params: []
+        }
+      ))
+    }
+  },
   methods: {
     position(key) {
       const { x, y } = key
@@ -40,9 +49,9 @@ export default {
     },
     handleUpdateBind(keyIndex, updatedBinding) {
       this.$emit('update', [
-        ...this.keys.slice(0, keyIndex),
+        ...this.normalized.slice(0, keyIndex),
         updatedBinding,
-        ...this.keys.slice(keyIndex + 1)
+        ...this.normalized.slice(keyIndex + 1)
       ])
     }
   }