feat(web-ui): replace dropdown menus with checkboxes (#3455)

src_assets/common/assets/web/configs/tabs/Inputs.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref } from 'vue'
 import PlatformLayout from '../../PlatformLayout.vue'
+import Checkbox from "../../Checkbox.vue";
 
 const props = defineProps([
   'platform',
@@ -13,14 +14,12 @@ const config = ref(props.config)
 <template>
   <div id="input" class="config-page">
     <!-- Enable Gamepad Input -->
-    <div class="mb-3">
-      <label for="controller" class="form-label">{{ $t('config.controller') }}</label>
-      <select id="controller" class="form-select" v-model="config.controller">
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-        <option value="enabled">{{ $t('_common.enabled') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.controller_desc') }}</div>
-    </div>
+    <Checkbox class="mb-3"
+              id="controller"
+              locale-prefix="config"
+              v-model="config.controller"
+              default="true"
+    ></Checkbox>
 
     <!-- Emulated Gamepad Type -->
     <div class="mb-3" v-if="config.controller === 'enabled' && platform !== 'macos'">
@@ -44,63 +43,53 @@ const config = ref(props.config)
       <div class="form-text">{{ $t('config.gamepad_desc') }}</div>
     </div>
 
-    <div class="accordion" v-if="config.gamepad === 'ds4'">
-      <div class="accordion-item">
-        <h2 class="accordion-header">
-          <button class="accordion-button" type="button" data-bs-toggle="collapse"
-                  data-bs-target="#panelsStayOpen-collapseOne">
-            {{ $t('config.gamepad_ds4_manual') }}
-          </button>
-        </h2>
-        <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
-             aria-labelledby="panelsStayOpen-headingOne">
-          <div class="accordion-body">
-            <div>
-              <label for="ds4_back_as_touchpad_click" class="form-label">{{ $t('config.ds4_back_as_touchpad_click') }}</label>
-              <select id="ds4_back_as_touchpad_click" class="form-select"
-                      v-model="config.ds4_back_as_touchpad_click">
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.ds4_back_as_touchpad_click_desc') }}</div>
+    <!-- Additional options based on gamepad type -->
+    <template v-if="config.controller === 'enabled'">
+      <template v-if="config.gamepad === 'ds4' || (config.gamepad === 'auto' && platform === 'windows')">
+        <div class="mb-3 accordion">
+          <div class="accordion-item">
+            <h2 class="accordion-header">
+              <button class="accordion-button" type="button" data-bs-toggle="collapse"
+                      data-bs-target="#panelsStayOpen-collapseOne">
+                {{ $t(config.gamepad === 'ds4' ? 'config.gamepad_ds4_manual' : 'config.gamepad_auto') }}
+              </button>
+            </h2>
+            <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
+                 aria-labelledby="panelsStayOpen-headingOne">
+              <div class="accordion-body">
+                <!-- Auto options (Windows only) -->
+                <template v-if="config.gamepad === 'auto'">
+                  <!-- DS4 motion -->
+                  <Checkbox class="mb-3"
+                            id="motion_as_ds4"
+                            locale-prefix="config"
+                            v-model="config.motion_as_ds4"
+                            default="true"
+                  ></Checkbox>
+                  <!-- DS4 touchpad -->
+                  <Checkbox class="mb-3"
+                            id="touchpad_as_ds4"
+                            locale-prefix="config"
+                            v-model="config.touchpad_as_ds4"
+                            default="true"
+                  ></Checkbox>
+                </template>
+                <!-- DS4 options (all platforms) -->
+                <template v-if="config.gamepad === 'ds4'">
+                  <!-- DS4 back button as touchpad click -->
+                  <Checkbox class="mb-3"
+                            id="ds4_back_as_touchpad_click"
+                            locale-prefix="config"
+                            v-model="config.ds4_back_as_touchpad_click"
+                            default="true"
+                  ></Checkbox>
+                </template>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </div>
-    <div class="accordion" v-if="config.controller === 'enabled' && config.gamepad === 'auto' && platform === 'windows'">
-      <div class="accordion-item">
-        <h2 class="accordion-header">
-          <button class="accordion-button" type="button" data-bs-toggle="collapse"
-                  data-bs-target="#panelsStayOpen-collapseOne">
-            {{ $t('config.gamepad_auto') }}
-          </button>
-        </h2>
-        <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
-             aria-labelledby="panelsStayOpen-headingOne">
-          <div class="accordion-body">
-            <div>
-              <label for="motion_as_ds4" class="form-label">{{ $t('config.motion_as_ds4') }}</label>
-              <select id="motion_as_ds4" class="form-select"
-                      v-model="config.motion_as_ds4">
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.motion_as_ds4_desc') }}</div>
-            </div>
-            <div>
-              <label for="touchpad_as_ds4" class="form-label">{{ $t('config.touchpad_as_ds4') }}</label>
-              <select id="touchpad_as_ds4" class="form-select"
-                      v-model="config.touchpad_as_ds4">
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.touchpad_as_ds4_desc') }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+      </template>
+    </template>
 
     <!-- Home/Guide Button Emulation Timeout -->
     <div class="mb-3" v-if="config.controller === 'enabled'">
@@ -112,14 +101,12 @@ const config = ref(props.config)
 
     <!-- Enable Keyboard Input -->
     <hr>
-    <div class="mb-3">
-      <label for="keyboard" class="form-label">{{ $t('config.keyboard') }}</label>
-      <select id="keyboard" class="form-select" v-model="config.keyboard">
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-        <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.keyboard_desc') }}</div>
-    </div>
+    <Checkbox class="mb-3"
+              id="keyboard"
+              locale-prefix="config"
+              v-model="config.keyboard"
+              default="true"
+    ></Checkbox>
 
     <!-- Key Repeat Delay-->
     <div class="mb-3" v-if="config.keyboard === 'enabled' && platform === 'windows'">
@@ -138,56 +125,49 @@ const config = ref(props.config)
     </div>
 
     <!-- Always send scancodes -->
-    <div class="mb-3" v-if="config.keyboard === 'enabled' && platform === 'windows'">
-      <label for="always_send_scancodes" class="form-label">{{ $t('config.always_send_scancodes') }}</label>
-      <select id="always_send_scancodes" class="form-select" v-model="config.always_send_scancodes">
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-        <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.always_send_scancodes_desc') }}</div>
-    </div>
+    <Checkbox v-if="config.keyboard === 'enabled' && platform === 'windows'"
+              class="mb-3"
+              id="always_send_scancodes"
+              locale-prefix="config"
+              v-model="config.always_send_scancodes"
+              default="true"
+    ></Checkbox>
 
     <!-- Mapping Key AltRight to Key Windows -->
-    <div class="mb-3" v-if="config.keyboard === 'enabled'">
-      <label for="key_rightalt_to_key_win" class="form-label">{{ $t('config.key_rightalt_to_key_win') }}</label>
-      <select id="key_rightalt_to_key_win" class="form-select" v-model="config.key_rightalt_to_key_win">
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-        <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.key_rightalt_to_key_win_desc') }}</div>
-    </div>
+    <Checkbox v-if="config.keyboard === 'enabled'"
+              class="mb-3"
+              id="key_rightalt_to_key_win"
+              locale-prefix="config"
+              v-model="config.key_rightalt_to_key_win"
+              default="false"
+    ></Checkbox>
 
     <!-- Enable Mouse Input -->
     <hr>
-    <div class="mb-3">
-      <label for="mouse" class="form-label">{{ $t('config.mouse') }}</label>
-      <select id="mouse" class="form-select" v-model="config.mouse">
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-        <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.mouse_desc') }}</div>
-    </div>
+    <Checkbox class="mb-3"
+              id="mouse"
+              locale-prefix="config"
+              v-model="config.mouse"
+              default="true"
+    ></Checkbox>
 
     <!-- High resolution scrolling support -->
-    <div class="mb-3" v-if="config.mouse === 'enabled'">
-      <label for="high_resolution_scrolling" class="form-label">{{ $t('config.high_resolution_scrolling') }}</label>
-      <select id="high_resolution_scrolling" class="form-select" v-model="config.high_resolution_scrolling">
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-        <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.high_resolution_scrolling_desc') }}</div>
-    </div>
+    <Checkbox v-if="config.mouse === 'enabled'"
+              class="mb-3"
+              id="high_resolution_scrolling"
+              locale-prefix="config"
+              v-model="config.high_resolution_scrolling"
+              default="true"
+    ></Checkbox>
 
     <!-- Native pen/touch support -->
-    <div class="mb-3" v-if="config.mouse === 'enabled'">
-      <label for="native_pen_touch" class="form-label">{{ $t('config.native_pen_touch') }}</label>
-      <select id="native_pen_touch" class="form-select" v-model="config.native_pen_touch">
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-        <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.native_pen_touch_desc') }}</div>
-    </div>
-
+    <Checkbox v-if="config.mouse === 'enabled'"
+              class="mb-3"
+              id="native_pen_touch"
+              locale-prefix="config"
+              v-model="config.native_pen_touch"
+              default="true"
+    ></Checkbox>
   </div>
 </template>