From 0ba4b7864f4531b5ccac1880ea32c123ff1fbd7c Mon Sep 17 00:00:00 2001
From: SonTT19 <49301480+SonTT19@users.noreply.github.com>
Date: Wed, 12 Jun 2024 00:37:36 +0700
Subject: [PATCH] fix(VTimePicker): properly apply disabled props (#19964)

Co-authored-by: John Leider <john@vuetifyjs.com>
---
 .../vuetify/src/labs/VTimePicker/VTimePickerClock.tsx    | 6 +++++-
 .../vuetify/src/labs/VTimePicker/VTimePickerControls.tsx | 9 +++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.tsx b/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.tsx
index 5b05d53e6c3..4b1d6e653c0 100644
--- a/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.tsx
+++ b/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.tsx
@@ -102,6 +102,8 @@ export const VTimePickerClock = genericComponent()({
     }
 
     function wheel (e: WheelEvent) {
+      if (!props.scrollable || props.disabled) return
+
       e.preventDefault()
 
       const delta = Math.sign(-e.deltaY || 1)
@@ -196,6 +198,8 @@ export const VTimePickerClock = genericComponent()({
     }
 
     function onMouseDown (e: MouseEvent | TouchEvent) {
+      if (props.disabled) return
+
       e.preventDefault()
 
       window.addEventListener('mousemove', onDragMove)
@@ -233,7 +237,7 @@ export const VTimePickerClock = genericComponent()({
           ]}
           onMousedown={ onMouseDown }
           onTouchstart={ onMouseDown }
-          onWheel={ (e: WheelEvent) => (props.scrollable && wheel(e)) }
+          onWheel={ wheel }
           ref={ clockRef }
         >
           <div class="v-time-picker-clock__inner" ref={ innerClockRef }>
diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePickerControls.tsx b/packages/vuetify/src/labs/VTimePicker/VTimePickerControls.tsx
index 9e25f7557b0..6d862e0a4ec 100644
--- a/packages/vuetify/src/labs/VTimePicker/VTimePickerControls.tsx
+++ b/packages/vuetify/src/labs/VTimePicker/VTimePickerControls.tsx
@@ -59,6 +59,7 @@ export const VTimePickerControls = genericComponent()({
             <VBtn
               active={ props.selecting === 1 }
               color={ props.selecting === 1 ? props.color : undefined }
+              disabled={ props.disabled }
               variant="tonal"
               class={{
                 'v-time-picker-controls__time__btn': true,
@@ -85,6 +86,7 @@ export const VTimePickerControls = genericComponent()({
                 'v-time-picker-controls__time--with-ampm__btn': props.ampm,
                 'v-time-picker-controls__time--with-seconds__btn': props.useSeconds,
               }}
+              disabled={ props.disabled }
               variant="tonal"
               text={ props.minute == null ? '--' : pad(props.minute) }
               onClick={ () => emit('update:selecting', SelectingTimes.Minute) }
@@ -113,6 +115,7 @@ export const VTimePickerControls = genericComponent()({
                     'v-time-picker-controls__time__btn__active': props.selecting === 3,
                     'v-time-picker-controls__time--with-seconds__btn': props.useSeconds,
                   }}
+                  disabled={ props.disabled }
                   text={ props.second == null ? '--' : pad(props.second) }
                 />
               )
@@ -133,8 +136,9 @@ export const VTimePickerControls = genericComponent()({
                       'v-time-picker-controls__ampm__btn': true,
                       'v-time-picker-controls__ampm__btn__active': props.period === 'am',
                     }}
+                    disabled={ props.disabled }
                     text={ t('$vuetify.timePicker.am') }
-                    variant="tonal"
+                    variant={ props.disabled && props.period === 'am' ? 'elevated' : 'tonal' }
                     onClick={ () => props.period !== 'am' ? emit('update:period', 'am') : null }
                   />
 
@@ -146,8 +150,9 @@ export const VTimePickerControls = genericComponent()({
                       'v-time-picker-controls__ampm__btn': true,
                       'v-time-picker-controls__ampm__btn__active': props.period === 'pm',
                     }}
+                    disabled={ props.disabled }
                     text={ t('$vuetify.timePicker.pm') }
-                    variant="tonal"
+                    variant={ props.disabled && props.period === 'pm' ? 'elevated' : 'tonal' }
                     onClick={ () => props.period !== 'pm' ? emit('update:period', 'pm') : null }
                   />
                 </div>