Adjust time formatting; Removing unneeded code; adjust styles

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

Hide file tree

Showing 5 changed files with 13 additions and 17 deletions.
diff --git a/packages/vuetify/src/composables/date/adapters/vuetify.ts b/packages/vuetify/src/composables/date/adapters/vuetify.ts
@@ -333,13 +333,13 @@ function format (
       options = { second: 'numeric' }
       break
     case 'fullTime':
-      options = { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }
+      options = { hour: 'numeric', minute: 'numeric', hour12: true }
       break
     case 'fullTime12h':
-      options = { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }
+      options = { hour: 'numeric', minute: 'numeric', hour12: true }
       break
     case 'fullTime24h':
-      options = { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false }
+      options = { hour: 'numeric', minute: 'numeric', hour12: false }
       break
     case 'fullDateTime':
       options = { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }

diff --git a/packages/vuetify/src/labs/VTimeInput/VTimeInput.tsx b/packages/vuetify/src/labs/VTimeInput/VTimeInput.tsx
@@ -7,12 +7,11 @@ import { makeVTimePickerProps, VTimePicker } from '@/labs/VTimePicker/VTimePicke
 // Composables
 import { useDate } from '@/composables/date'
 import { makeFocusProps, useFocus } from '@/composables/focus'
-import { useLocale } from '@/composables/locale'
 import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
 import { computed, shallowRef } from 'vue'
-import { genericComponent, omit, propsFactory, useRender, wrapInArray } from '@/util'
+import { genericComponent, omit, propsFactory, useRender } from '@/util'
 
 // Types
 export interface VTimeInputSlots {
@@ -29,7 +28,6 @@ export const makeVTimeInputProps = propsFactory({
     prependIcon: '$clock',
   }),
   ...omit(makeVTimePickerProps({
-    weeksInMonth: 'dynamic' as const,
     hideHeader: true,
   }), ['active']),
 }, 'VTimeInput')
@@ -44,19 +42,14 @@ export const VTimeInput = genericComponent()({
   },
 
   setup (props, { slots }) {
-    const { t } = useLocale()
     const adapter = useDate()
     const { isFocused, focus, blur } = useFocus(props)
-    const model = useProxiedModel(props, 'modelValue', props.multiple ? [] : null)
+    const model = useProxiedModel(props, 'modelValue', null)
     const menu = shallowRef(false)
 
-    const display = computed(() => {
-      const value = wrapInArray(model.value)
-
-      if (!value.length) return null
-
-      return adapter.isValid(model.value) ? adapter.format(model.value, 'keyboardDate') : ''
-    })
+    const display = computed(() => adapter.isValid(model.value)
+      ? adapter.format(model.value, props.format === '24hr' ? 'fullTime24h' : 'fullTime12h')
+      : '')
 
     function onKeydown (e: KeyboardEvent) {
       if (e.key !== 'Enter') return

diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePicker.sass b/packages/vuetify/src/labs/VTimePicker/VTimePicker.sass
@@ -9,3 +9,6 @@
     .v-picker-title
       padding: 0
       margin-bottom: 20px
+
+    .v-picker__body
+      padding: 0
diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.sass b/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.sass
@@ -15,7 +15,7 @@
       color: rgb(var(--v-theme-on-surface-variant))
 
   .v-time-picker-clock
-    margin: 0 auto
+    margin: 24px auto
     background: rgb(var(--v-theme-surface-light))
     border-radius: 50%
     position: relative

diff --git a/packages/vuetify/src/labs/VTimePicker/_variables.scss b/packages/vuetify/src/labs/VTimePicker/_variables.scss
@@ -1,6 +1,6 @@
 @forward '../VPicker/variables';
 
-$time-picker-padding: 24px !default;
+$time-picker-padding: 0px !default;
 $time-picker-contols-btn-font: 56px !default;
 $time-picker-contols-btn-height: 80px !default;
 $time-picker-contols-btn-width: 96px !default;