Show AM/PM selector even if headers are hidden

vuetifyjs · Apr 27, 2024 · b4e7ed8 · b4e7ed8
1 parent 098f9dd
commit b4e7ed8
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 62 deletions.
diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePicker.tsx b/packages/vuetify/src/labs/VTimePicker/VTimePicker.tsx
@@ -295,18 +295,19 @@ export const VTimePicker = genericComponent<VTimePickerSlots>()({
       return (
         <VPicker
           { ...pickerProps }
+          hide-header={ undefined }
           color={ undefined }
           class={[
             'v-time-picker',
             props.class,
           ]}
           style={ props.style }
           v-slots={{
-            title: () => slots.title?.() ?? (
+            title: () => slots.title?.() ?? (!props.hideHeader && (
               <div class="v-time-picker__title">
                 { t(props.title) }
               </div>
-            ),
+            )) ?? undefined,
             header: () => (
               <VTimePickerControls
                 { ...timePickerControlsProps }

diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePickerControls.sass b/packages/vuetify/src/labs/VTimePicker/VTimePickerControls.sass
@@ -11,7 +11,7 @@
     padding-bottom: 4px
     // padding-inline-start: 6px
     // padding-inline-end: 12px
-    margin-bottom: 36px
+    margin-bottom: 12px
 
     &__text
       padding-bottom: 12px
@@ -22,6 +22,11 @@
       direction: ltr
       justify-content: center
 
+      &.v-time-picker-hide-controls
+        width: 100%
+        justify-content: end
+        padding-right: 24px
+
       &__btn.v-btn--density-default.v-btn
         width: $time-picker-contols-btn-width
         height: $time-picker-contols-btn-height

diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePickerControls.tsx b/packages/vuetify/src/labs/VTimePicker/VTimePickerControls.tsx
@@ -53,71 +53,76 @@ export const VTimePickerControls = genericComponent()({
           <div
             class={{
               'v-time-picker-controls__time': true,
+              'v-time-picker-hide-controls': props.hideHeader,
               'v-time-picker-controls__time--with-seconds': props.useSeconds,
             }}
           >
-            <VBtn
-              active={ props.selecting === 1 }
-              color={ props.selecting === 1 ? props.color : undefined }
-              variant="tonal"
-              class={{
-                'v-time-picker-controls__time__btn': true,
-                'v-time-picker-controls__time--with-ampm__btn': props.ampm,
-                'v-time-picker-controls__time--with-seconds__btn': props.useSeconds,
-              }}
-              text={ props.hour == null ? '--' : pad(`${hour}`) }
-              onClick={ () => emit('update:selecting', SelectingTimes.Hour) }
-            />
-
-            <span
-              class={[
-                'v-time-picker-controls__time__separator',
-                { 'v-time-picker-controls--with-seconds__time__separator': props.useSeconds },
-              ]}
-            >:</span>
-
-            <VBtn
-              active={ props.selecting === 2 }
-              color={ props.selecting === 2 ? props.color : undefined }
-              class={{
-                'v-time-picker-controls__time__btn': true,
-                'v-time-picker-controls__time__btn__active': props.selecting === 2,
-                'v-time-picker-controls__time--with-ampm__btn': props.ampm,
-                'v-time-picker-controls__time--with-seconds__btn': props.useSeconds,
-              }}
-              variant="tonal"
-              text={ props.minute == null ? '--' : pad(props.minute) }
-              onClick={ () => emit('update:selecting', SelectingTimes.Minute) }
-            />
-
             {
-              props.useSeconds && (
-                <span
-                  class={[
-                    'v-time-picker-controls__time__separator',
-                    { 'v-time-picker-controls--with-seconds__time__separator': props.useSeconds },
-                  ]}
-                  key="secondsDivider"
-                >:</span>
-              )
-            }
+              !props.hideHeader && (
+                <div key="timePickerTimeBtns">
+                  <VBtn
+                    active={ props.selecting === 1 }
+                    color={ props.selecting === 1 ? props.color : undefined }
+                    variant="tonal"
+                    class={{
+                      'v-time-picker-controls__time__btn': true,
+                      'v-time-picker-controls__time--with-ampm__btn': props.ampm,
+                      'v-time-picker-controls__time--with-seconds__btn': props.useSeconds,
+                    }}
+                    text={ props.hour == null ? '--' : pad(`${hour}`) }
+                    onClick={ () => emit('update:selecting', SelectingTimes.Hour) }
+                  />
 
-            {
-              props.useSeconds && (
-                <VBtn
-                  key="secondsVal"
-                  variant="tonal"
-                  onClick={ () => emit('update:selecting', SelectingTimes.Second) }
-                  class={{
-                    'v-time-picker-controls__time__btn': true,
-                    'v-time-picker-controls__time__btn__active': props.selecting === 3,
-                    'v-time-picker-controls__time--with-seconds__btn': props.useSeconds,
-                  }}
-                  text={ props.second == null ? '--' : pad(props.second) }
-                />
-              )
-            }
+                  <span
+                    class={[
+                      'v-time-picker-controls__time__separator',
+                      { 'v-time-picker-controls--with-seconds__time__separator': props.useSeconds },
+                    ]}
+                  >:</span>
 
+                  <VBtn
+                    active={ props.selecting === 2 }
+                    color={ props.selecting === 2 ? props.color : undefined }
+                    class={{
+                      'v-time-picker-controls__time__btn': true,
+                      'v-time-picker-controls__time__btn__active': props.selecting === 2,
+                      'v-time-picker-controls__time--with-ampm__btn': props.ampm,
+                      'v-time-picker-controls__time--with-seconds__btn': props.useSeconds,
+                    }}
+                    variant="tonal"
+                    text={ props.minute == null ? '--' : pad(props.minute) }
+                    onClick={ () => emit('update:selecting', SelectingTimes.Minute) }
+                  />
+
+                  {
+                    props.useSeconds && (
+                      <span
+                        class={[
+                          'v-time-picker-controls__time__separator',
+                          { 'v-time-picker-controls--with-seconds__time__separator': props.useSeconds },
+                        ]}
+                        key="secondsDivider"
+                      >:</span>
+                    )
+                  }
+
+                  {
+                    props.useSeconds && (
+                      <VBtn
+                        key="secondsVal"
+                        variant="tonal"
+                        onClick={ () => emit('update:selecting', SelectingTimes.Second) }
+                        class={{
+                          'v-time-picker-controls__time__btn': true,
+                          'v-time-picker-controls__time__btn__active': props.selecting === 3,
+                          'v-time-picker-controls__time--with-seconds__btn': props.useSeconds,
+                        }}
+                        text={ props.second == null ? '--' : pad(props.second) }
+                      />
+                    )
+                  }
+                </div>
+              )}
             {
               props.ampm && (
                 <div