add custom setter for settings

src/ext/conf/ActionList.js

@@ -23,7 +23,15 @@ var ActionList = {
       name: 'Manually specify ratio',
       arg: AspectRatio.Fixed,
       customArg: true,
-      hintHTML: '',
+      customSetter: (value) => {
+        const [width, height] = value.split(':');
+
+        if (width && height) {
+          return +width / +height;
+        }
+        return +width;
+      },
+      hintHTML: '<small>Enter the aspect ratio as {width}:{height} or a single number, e.g. "21:9", "2.35:1", or "2.35" (without quotes).</small>',
     }],
     scopes: {
       global: false,

src/options/controls-settings/command-builder/CommandAddEdit.vue

@@ -59,7 +59,8 @@
         <div class="flex flex-grow flex-input">
           <input type="text"
                   class="w100"
-                  v-model="customArgumentValue"
+                  :value="customArgumentValue"
+                  @input="setCustomValue($event.target.value, selectedArgument.customSetter)"
           >
         </div>
       </div>
@@ -122,6 +123,13 @@ export default {
       this.selectedArgument = ActionList[this.selectedAction].args.find(x => x.arg == arg);
       this.customArgumentValue = undefined;
     },
+    setCustomValue(value, customSetter) {
+      if (!customSetter) {
+        this.customArgumentValue = value;
+      } else {
+        this.customArgumentValue = customSetter(value);
+      }
+    },
     emitCommand() {
       this.$emit(
         'set-command',