diff options
Diffstat (limited to 'packages/frontend/src')
| -rw-r--r-- | packages/frontend/src/components/MkRange.vue | 9 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkSelect.vue | 2 |
2 files changed, 9 insertions, 2 deletions
diff --git a/packages/frontend/src/components/MkRange.vue b/packages/frontend/src/components/MkRange.vue index 7a5848de48..67a9094cad 100644 --- a/packages/frontend/src/components/MkRange.vue +++ b/packages/frontend/src/components/MkRange.vue @@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only <div class="label"> <slot name="label"></slot> </div> - <div v-adaptive-border class="body"> + <div v-adaptive-border class="body" :class="{ 'disabled': disabled }"> <slot name="prefix"></slot> <div ref="containerEl" class="container"> <div class="track"> @@ -180,6 +180,8 @@ function onMouseenter() { let lastClickTime: number | null = null; function onMousedown(ev: MouseEvent | TouchEvent) { + if (props.disabled) return; // Prevent interaction if disabled + ev.preventDefault(); tooltipForDragShowing.value = true; @@ -292,6 +294,11 @@ function onMousedown(ev: MouseEvent | TouchEvent) { border: solid 1px var(--MI_THEME-panel); border-radius: 6px; + &.disabled { + pointer-events: none; + opacity: 0.6; + } + > .container { flex: 1; position: relative; diff --git a/packages/frontend/src/components/MkSelect.vue b/packages/frontend/src/components/MkSelect.vue index 58a4edfddf..485d163ac4 100644 --- a/packages/frontend/src/components/MkSelect.vue +++ b/packages/frontend/src/components/MkSelect.vue @@ -174,7 +174,7 @@ watch([modelValue, () => props.items], () => { }, { immediate: true, deep: true }); function show() { - if (opening.value) return; + if (opening.value || props.disabled || props.readonly) return; focus(); opening.value = true; |