Allow to resize a keyboard

src/components/KeyboardConfiguration.vue

 <template>
   <div class="conf-div">
     <div>
-      <UTF8Picker v-if="picker" :selectedChar.sync="selectedChar" />
-      <KeyboardDisplay
-        v-else
-        :keyboard-index="keyboardIndex"
-        :selectedKey="selectedKey"
-        v-on:input="(i) => (selectedKey = i)"
-      />
+      <keep-alive>
+        <UTF8Picker v-if="picker" :selectedChar.sync="selectedChar" />
+        <KeyboardDisplay
+          v-else
+          :keyboard-index="keyboardIndex"
+          :selectedKey="selectedKey"
+          v-on:input="(i) => (selectedKey = i)"
+          resizable
+        />
+      </keep-alive>
     </div>
     <div class="picker">
       <template v-if="selectedKey">

src/components/KeyboardDisplay.vue

 <template>
-  <div v-if="characters && characters.length">
+  <div>
     <div v-if="!charTable">An error occured loading the keyboard</div>
     <div v-else v-for="(row, i) in charTable" :key="i">
       <span v-for="(char, j) in row" :key="j">
@@ -19,11 +19,31 @@
         </button>
       </span>
     </div>
+    <template v-if="resizable">
+      <label>Rows</label>
+      <!-- Directly parse field value to handle integers only -->
+      <input
+        :value="rows"
+        v-on:change.prevent="(e) => updateRows(e.target.value)"
+        :min="rowsCount"
+        :max="maxKeyboardSize"
+        type="number"
+      />
+      <label>Columns</label>
+      <input
+        :value="columns"
+        v-on:change.prevent="(e) => updateColumns(e.target.value)"
+        :min="columnsCount"
+        :max="maxKeyboardSize"
+        type="number"
+      />
+    </template>
   </div>
 </template>
 
 <script>
 import { mapState } from "vuex";
+import { maxKeyboardSize } from "../config.js";
 
 export default {
   props: {
@@ -36,29 +56,46 @@ export default {
       type: Object,
       default: null,
     },
+    resizable: {
+      type: Boolean,
+      default: false,
+    },
   },
+  data: () => ({
+    // Rows and columns including a potential resize of the keyboard
+    rows: 0,
+    columns: 0,
+    maxKeyboardSize,
+  }),
   computed: {
     ...mapState(["keyboards"]),
+    keyboard() {
+      return this.keyboards[this.keyboardIndex];
+    },
     characters() {
-      return this.keyboards[this.keyboardIndex].characters;
+      return this.keyboard && this.keyboard.characters;
     },
     rowsCount() {
+      // Return the number of rows from keyboard characters
+      if (!this.characters.length) return 1;
       return (
         this.characters && Math.max(...this.characters.map((c) => c.row)) + 1
       );
     },
     columnsCount() {
+      // Return the number of columns from keyboard characters
+      if (!this.characters.length) return 1;
       return (
         this.characters && Math.max(...this.characters.map((c) => c.column)) + 1
       );
     },
     charTable() {
-      if (!this.columnsCount || !this.rowsCount) return;
+      const [tableRows, tableCols] = this.resizable
+        ? [this.rows, this.columns]
+        : [this.rowsCount, this.columnsCount];
+      if (!tableRows || !tableCols) return;
       // Return a list of every column with padding
-      const table = Array.from(
-        Array(this.rowsCount),
-        () => new Array(this.columnsCount)
-      );
+      const table = Array.from(Array(tableRows), () => new Array(tableCols));
       if (!this.characters) return table;
       this.characters.forEach((c) => {
         table[c.row][c.column] = c;
@@ -66,6 +103,33 @@ export default {
       return table;
     },
   },
+  methods: {
+    // We need to handle input changes manually as v-model.number allows random numbers or empty strings
+    updateRows(value) {
+      if (isNaN(value) || value < this.rowsCount || value > maxKeyboardSize)
+        return;
+      this.rows = parseInt(value);
+    },
+    updateColumns(value) {
+      if (isNaN(value) || value < this.columnsCount || value > maxKeyboardSize)
+        return;
+      this.columns = parseInt(value);
+    },
+  },
+  watch: {
+    rowsCount: {
+      immediate: true,
+      handler(n) {
+        if (!this.rows) this.rows = n || 1;
+      },
+    },
+    columnsCount: {
+      immediate: true,
+      handler(n) {
+        if (!this.columns) this.columns = n || 1;
+      },
+    },
+  },
 };
 </script>