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

This commit is contained in:
Lukas Senionis
2025-01-05 21:43:45 +02:00
committed by GitHub
parent 65878af8ea
commit 2e5c291233
14 changed files with 363 additions and 273 deletions

View File

@@ -6,6 +6,7 @@ import AdapterNameSelector from './audiovideo/AdapterNameSelector.vue'
import DisplayOutputSelector from './audiovideo/DisplayOutputSelector.vue'
import DisplayDeviceOptions from "./audiovideo/DisplayDeviceOptions.vue";
import DisplayModesSettings from "./audiovideo/DisplayModesSettings.vue";
import Checkbox from "../../Checkbox.vue";
const props = defineProps([
'platform',
@@ -54,14 +55,12 @@ const config = ref(props.config)
</div>
<!-- Install Steam Audio Drivers -->
<div class="mb-3">
<label for="install_steam_audio_drivers" class="form-label">{{ $t('config.install_steam_audio_drivers') }}</label>
<select id="install_steam_audio_drivers" class="form-select" v-model="config.install_steam_audio_drivers">
<option value="disabled">{{ $t('_common.disabled') }}</option>
<option value="enabled">{{ $t('_common.enabled_def') }}</option>
</select>
<div class="form-text">{{ $t('config.install_steam_audio_drivers_desc') }}</div>
</div>
<Checkbox class="mb-3"
id="install_steam_audio_drivers"
locale-prefix="config"
v-model="config.install_steam_audio_drivers"
default="true"
></Checkbox>
</template>
</PlatformLayout>

View File

@@ -1,4 +1,5 @@
<script setup>
import Checkbox from '../../Checkbox.vue'
import { ref } from 'vue'
const props = defineProps({
@@ -100,12 +101,12 @@ function removeCmd(index) {
<td>
<input type="text" class="form-control monospace" v-model="c.undo" />
</td>
<td v-if="platform === 'windows'">
<div class="form-check">
<input type="checkbox" class="form-check-input" :id="'prep-cmd-admin-' + i" v-model="c.elevated"
true-value="true" false-value="false" />
<label :for="'prep-cmd-admin-' + i" class="form-check-label">{{ $t('config.elevated') }}</label>
</div>
<td v-if="platform === 'windows'" class="align-middle">
<Checkbox :id="'prep-cmd-admin-' + i"
label="_common.elevated"
desc=""
v-model="c.elevated"
></Checkbox>
</td>
<td>
<button class="btn btn-danger" @click="removeCmd(i)">
@@ -124,14 +125,12 @@ function removeCmd(index) {
</div>
<!-- Notify Pre-Releases -->
<div class="mb-3">
<label for="notify_pre_releases" class="form-label">{{ $t('config.notify_pre_releases') }}</label>
<select id="notify_pre_releases" class="form-select" v-model="config.notify_pre_releases">
<option value="disabled">{{ $t('_common.disabled') }}</option>
<option value="enabled">{{ $t('_common.enabled') }}</option>
</select>
<div class="form-text">{{ $t('config.notify_pre_releases_desc') }}</div>
</div>
<Checkbox class="mb-3"
id="notify_pre_releases"
locale-prefix="config"
v-model="config.notify_pre_releases"
default="false"
></Checkbox>
</div>
</template>

View File

@@ -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>

View File

@@ -1,5 +1,6 @@
<script setup>
import { computed, ref } from 'vue'
import Checkbox from "../../Checkbox.vue";
const props = defineProps([
'platform',
@@ -15,14 +16,12 @@ const effectivePort = computed(() => +config.value?.port ?? defaultMoonlightPort
<template>
<div id="network" class="config-page">
<!-- UPnP -->
<div class="mb-3">
<label for="upnp" class="form-label">{{ $t('config.upnp') }}</label>
<select id="upnp" class="form-select" v-model="config.upnp">
<option value="disabled">{{ $t('_common.disabled_def') }}</option>
<option value="enabled">{{ $t('_common.enabled') }}</option>
</select>
<div class="form-text">{{ $t('config.upnp_desc') }}</div>
</div>
<Checkbox class="mb-3"
id="upnp"
locale-prefix="config"
v-model="config.upnp"
default="false"
></Checkbox>
<!-- Address family -->
<div class="mb-3">

View File

@@ -20,7 +20,7 @@ const config = ref(props.config)
<div class="form-text">
<PlatformLayout :platform="platform">
<template #windows>
{{ $t('config.adapter_name_desc_win') }}<br>
{{ $t('config.adapter_name_desc_windows') }}<br>
<pre>tools\dxgi-info.exe</pre>
</template>
<template #linux>

View File

@@ -16,14 +16,11 @@ const fpsIn = ref("")
</script>
<template>
<!--min_fps_factor-->
<div class="mb-3">
<!--min_fps_factor-->
<div class="mb-3">
<label for="qp" class="form-label">{{ $t('config.min_fps_factor') }}</label>
<input type="number" min="1" max="3" class="form-control" id="min_fps_factor" placeholder="1" v-model="config.min_fps_factor" />
<div class="form-text">{{ $t('config.min_fps_factor_desc') }}</div>
</div>
<label for="qp" class="form-label">{{ $t('config.min_fps_factor') }}</label>
<input type="number" min="1" max="3" class="form-control" id="min_fps_factor" placeholder="1" v-model="config.min_fps_factor" />
<div class="form-text">{{ $t('config.min_fps_factor_desc') }}</div>
</div>
</template>

View File

@@ -1,5 +1,6 @@
<script setup>
import { ref } from 'vue'
import Checkbox from "../../../Checkbox.vue";
const props = defineProps([
'platform',
@@ -25,7 +26,7 @@ const config = ref(props.config)
</div>
<!-- AMD Rate Control group options -->
<div class="accordion">
<div class="mb-3 accordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
@@ -49,21 +50,19 @@ const config = ref(props.config)
</div>
<!-- AMF HRD Enforcement -->
<div class="mb-3">
<label for="amd_enforce_hrd" class="form-label">{{ $t('config.amd_enforce_hrd') }}</label>
<select id="amd_enforce_hrd" class="form-select" v-model="config.amd_enforce_hrd">
<option value="enabled">{{ $t('_common.enabled') }}</option>
<option value="disabled">{{ $t('_common.disabled_def') }}</option>
</select>
<div class="form-text">{{ $t('config.amd_enforce_hrd_desc') }}</div>
</div>
<Checkbox class="mb-3"
id="amd_enforce_hrd"
locale-prefix="config"
v-model="config.amd_enforce_hrd"
default="false"
></Checkbox>
</div>
</div>
</div>
</div>
<!-- AMF Quality group options -->
<div class="accordion">
<div class="mb-3 accordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
@@ -86,24 +85,20 @@ const config = ref(props.config)
</div>
<!-- AMD Preanalysis -->
<div class="mb-3">
<label for="amd_preanalysis" class="form-label">{{ $t('config.amd_preanalysis') }}</label>
<select id="amd_preanalysis" class="form-select" v-model="config.amd_preanalysis">
<option value="disabled">{{ $t('_common.disabled_def') }}</option>
<option value="enabled">{{ $t('_common.enabled') }}</option>
</select>
<div class="form-text">{{ $t('config.amd_preanalysis_desc') }}</div>
</div>
<Checkbox class="mb-3"
id="amd_preanalysis"
locale-prefix="config"
v-model="config.amd_preanalysis"
default="false"
></Checkbox>
<!-- AMD VBAQ -->
<div class="mb-3">
<label for="amd_vbaq" class="form-label">{{ $t('config.amd_vbaq') }}</label>
<select id="amd_vbaq" class="form-select" v-model="config.amd_vbaq">
<option value="disabled">{{ $t('_common.disabled') }}</option>
<option value="enabled">{{ $t('_common.enabled_def') }}</option>
</select>
<div class="form-text">{{ $t('config.amd_vbaq_desc') }}</div>
</div>
<Checkbox class="mb-3"
id="amd_vbaq"
locale-prefix="config"
v-model="config.amd_vbaq"
default="true"
></Checkbox>
<!-- AMF Coder (H264) -->
<div class="mb-3">

View File

@@ -1,5 +1,6 @@
<script setup>
import { ref } from 'vue'
import Checkbox from "../../../Checkbox.vue";
const props = defineProps([
'platform',
@@ -36,15 +37,12 @@ const config = ref(props.config)
</div>
<!-- Allow Slow HEVC Encoding -->
<div class="mb-3">
<label for="qsv_slow_hevc" class="form-label">{{ $t('config.qsv_slow_hevc') }}</label>
<select id="qsv_slow_hevc" class="form-select" v-model="config.qsv_slow_hevc">
<option value="disabled">{{ $t('_common.disabled_def') }}</option>
<option value="enabled">{{ $t('_common.enabled') }}</option>
</select>
<div class="form-text">{{ $t('config.qsv_slow_hevc_desc') }}</div>
</div>
<Checkbox class="mb-3"
id="qsv_slow_hevc"
locale-prefix="config"
v-model="config.qsv_slow_hevc"
default="false"
></Checkbox>
</div>
</template>

View File

@@ -1,5 +1,6 @@
<script setup>
import { ref } from 'vue'
import Checkbox from "../../../Checkbox.vue";
const props = defineProps([
'platform',
@@ -60,7 +61,7 @@ const config = ref(props.config)
</div>
<!-- Miscellaneous options -->
<div class="accordion">
<div class="mb-3 accordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
@@ -72,48 +73,43 @@ const config = ref(props.config)
aria-labelledby="panelsStayOpen-headingOne">
<div class="accordion-body">
<!-- NVENC Realtime HAGS priority -->
<div class="mb-3" v-if="platform === 'windows'">
<label for="nvenc_realtime_hags" class="form-label">{{ $t('config.nvenc_realtime_hags') }}</label>
<select id="nvenc_realtime_hags" class="form-select" v-model="config.nvenc_realtime_hags">
<option value="disabled">{{ $t('_common.disabled') }}</option>
<option value="enabled">{{ $t('_common.enabled_def') }}</option>
</select>
<div class="form-text">
{{ $t('config.nvenc_realtime_hags_desc') }}<br>
<br>
<a href="https://devblogs.microsoft.com/directx/hardware-accelerated-gpu-scheduling/">HAGS</a>
</div>
</div>
<Checkbox v-if="platform === 'windows'"
class="mb-3"
id="nvenc_realtime_hags"
locale-prefix="config"
v-model="config.nvenc_realtime_hags"
default="true"
>
<br>
<br>
<a href="https://devblogs.microsoft.com/directx/hardware-accelerated-gpu-scheduling/">HAGS</a>
</Checkbox>
<!-- Prefer lower encoding latency over power savings -->
<div class="mb-3" v-if="platform === 'windows'">
<label for="nvenc_latency_over_power" class="form-label">{{ $t('config.nvenc_latency_over_power') }}</label>
<select id="nvenc_latency_over_power" class="form-select" v-model="config.nvenc_latency_over_power">
<option value="disabled">{{ $t('_common.disabled') }}</option>
<option value="enabled">{{ $t('_common.enabled_def') }}</option>
</select>
<div class="form-text">{{ $t('config.nvenc_latency_over_power_desc') }}</div>
</div>
<Checkbox v-if="platform === 'windows'"
class="mb-3"
id="nvenc_latency_over_power"
locale-prefix="config"
v-model="config.nvenc_latency_over_power"
default="true"
></Checkbox>
<!-- Present OpenGL/Vulkan on top of DXGI -->
<div class="mb-3" v-if="platform === 'windows'">
<label for="nvenc_opengl_vulkan_on_dxgi" class="form-label">{{ $t('config.nvenc_opengl_vulkan_on_dxgi') }}</label>
<select id="nvenc_opengl_vulkan_on_dxgi" class="form-select" v-model="config.nvenc_opengl_vulkan_on_dxgi">
<option value="disabled">{{ $t('_common.disabled') }}</option>
<option value="enabled">{{ $t('_common.enabled_def') }}</option>
</select>
<div class="form-text">{{ $t('config.nvenc_opengl_vulkan_on_dxgi_desc') }}</div>
</div>
<Checkbox v-if="platform === 'windows'"
class="mb-3"
id="nvenc_opengl_vulkan_on_dxgi"
locale-prefix="config"
v-model="config.nvenc_opengl_vulkan_on_dxgi"
default="true"
></Checkbox>
<!-- NVENC H264 CAVLC -->
<div>
<label for="nvenc_h264_cavlc" class="form-label">{{ $t('config.nvenc_h264_cavlc') }}</label>
<select id="nvenc_h264_cavlc" class="form-select" v-model="config.nvenc_h264_cavlc">
<option value="disabled">{{ $t('_common.disabled_def') }}</option>
<option value="enabled">{{ $t('_common.enabled') }}</option>
</select>
<div class="form-text">{{ $t('config.nvenc_h264_cavlc_desc') }}</div>
</div>
<Checkbox class="mb-3"
id="nvenc_h264_cavlc"
locale-prefix="config"
v-model="config.nvenc_h264_cavlc"
default="false"
></Checkbox>
</div>
</div>
</div>

View File

@@ -1,5 +1,6 @@
<script setup>
import { ref } from 'vue'
import Checkbox from "../../../Checkbox.vue";
const props = defineProps([
'platform',
@@ -12,14 +13,12 @@ const config = ref(props.config)
<template>
<div id="vaapi-encoder" class="config-page">
<!-- Strict RC Buffer -->
<div class="mb-3">
<label for="vaapi_strict_rc_buffer" class="form-label">{{ $t('config.vaapi_strict_rc_buffer') }}</label>
<select id="vaapi_strict_rc_buffer" class="form-select" v-model="config.vaapi_strict_rc_buffer">
<option value="enabled">{{ $t('_common.enabled') }}</option>
<option value="disabled">{{ $t('_common.disabled_def') }}</option>
</select>
<div class="form-text">{{ $t('config.vaapi_strict_rc_buffer_desc') }}</div>
</div>
<Checkbox class="mb-3"
id="vaapi_strict_rc_buffer"
locale-prefix="config"
v-model="config.vaapi_strict_rc_buffer"
default="false"
></Checkbox>
</div>
</template>

View File

@@ -1,5 +1,6 @@
<script setup>
import { ref } from 'vue'
import Checkbox from "../../../Checkbox.vue";
const props = defineProps([
'platform',
@@ -29,13 +30,13 @@ const config = ref(props.config)
<option value="forced">{{ $t('config.vt_software_forced') }}</option>
</select>
</div>
<div class="mb-3">
<label for="vt_realtime" class="form-label">{{ $t('config.vt_realtime') }}</label>
<select id="vt_realtime" class="form-select" v-model="config.vt_realtime">
<option value="enabled">{{ $t('_common.enabled') }}</option>
<option value="disabled">{{ $t('_common.disabled') }}</option>
</select>
</div>
<Checkbox class="mb-3"
id="vt_realtime"
desc=""
locale-prefix="config"
v-model="config.vt_realtime"
default="true"
></Checkbox>
</div>
</template>