fix(VTimePicker): properly apply disabled props (#19964)

Co-authored-by: John Leider <john@vuetifyjs.com>
vuetifyjs · Jun 11, 2024 · 0ba4b78 · 0ba4b78
1 parent 9e1cfbd
commit 0ba4b78
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git 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
@@ -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>