perf: improve macro editor UX

src/components/MacrosEditor.vue

@@ -7,6 +7,7 @@ import "vue3-json-viewer/dist/index.css";
 import PlusIcon from "icons/Plus.vue";
 import MenuRightIcon from "icons/MenuRight.vue";
 import MenuLeftIcon from "icons/MenuLeft.vue";
+import CloseIcon from "icons/Close.vue";
 import DragHorizontalVariantIcon from "icons/DragHorizontalVariant.vue";
 
 import { getSpecialKeyCode, checkSpecialKey } from "../utils/specialKeyHandler";
@@ -174,6 +175,10 @@ initializeLayout();
         <plus-icon :size="18" class="self-center mr-2" />
         {{ $t("addMacro") }}
       </button>
+      <button class="btn btn-reset flex" @click="removeEmptyMacros">
+        <close-icon :size="18" class="self-center mr-2" />
+        {{ $t("removeEmptyMacro") }}
+      </button>
     </div>
 
     <div class="overflow-y-auto overflow-x-hidden" style="max-height: 30rem">
@@ -229,22 +234,22 @@ initializeLayout();
             </select>
             <input
               type="text"
-              placeholder=""
+              placeholder="Macro Name"
               class="col-span-7 w-full text-input"
-              v-model="macro.name"
-              @input="updateOuputData"
+              v-model.lazy="macro.name"
+              @change="updateOuputData"
             />
             <input
               v-if="macro.type === 1 || macro.type === 2"
               type="text"
-              placeholder=""
+              placeholder="Type string here..."
               class="col-span-12 w-full text-input"
               v-model="macro.stringContent"
               @input="updateOuputData"
             />
             <div
               v-else
-              class="col-span-12 w-full text-input outline-0 cursor-pointer"
+              class="col-span-12 w-full text-input outline-0 cursor-pointer h-9"
               :class="activeMacroIndex === index ? 'macro-active' : ''"
               @click="toggleActive(index)"
               tabindex="0"

src/locales/en.json

@@ -35,5 +35,6 @@
     "buttonShow": "Show Tutorial"
   },
   "uploadKeyConfigToDevice": "Upload Configuration to Device",
-  "rotaryEncoderEditorTitle": "Rotary Encoder Editor"
+  "rotaryEncoderEditorTitle": "Rotary Encoder Editor",
+  "removeEmptyMacro": "Remove Empty"
 }

src/locales/zh-cn.json

@@ -35,5 +35,6 @@
     "buttonShow": "使用教程"
   },
   "uploadKeyConfigToDevice": "上传设置文件到装置",
-  "rotaryEncoderEditorTitle": "旋钮编辑"
+  "rotaryEncoderEditorTitle": "旋钮编辑",
+  "removeEmptyMacro": "移除空巨集"
 }

src/locales/zh-tw.json

@@ -35,5 +35,6 @@
     "buttonShow": "使用說明"
   },
   "uploadKeyConfigToDevice": "上傳設定檔到裝置",
-  "rotaryEncoderEditorTitle": "旋鈕編輯"
+  "rotaryEncoderEditorTitle": "旋鈕編輯",
+  "removeEmptyMacro": "刪除空巨集"
 }