From 89ed8be8ff51ff874b1973917394720734756d9f Mon Sep 17 00:00:00 2001
From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 6 Jul 2025 19:38:09 +0900
Subject: fix(frontend):
 MkRange/MkSelectでdisabledが効かなくなっている問題を修正 (#16263)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(frontend): MkRange/MkSelectでdisabledが効かなくなっている問題を修正

* Update Changelog

* 誤字
---
 packages/frontend/src/components/MkRange.vue  | 9 ++++++++-
 packages/frontend/src/components/MkSelect.vue | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

(limited to 'packages/frontend/src/components')

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;
-- 
cgit v1.2.3-freya