fix(TimeField): initial segments for TimeField based on granularity (#…

…1466)
unovue · Dec 1, 2024 · 8238615 · 8238615
1 parent 635b90e
commit 8238615
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/packages/core/src/TimeField/TimeFieldRoot.vue b/packages/core/src/TimeField/TimeFieldRoot.vue
@@ -189,7 +189,7 @@ const isInvalid = computed(() => {
   return false
 })
 
-const initialSegments = initializeTimeSegmentValues()
+const initialSegments = initializeTimeSegmentValues(inferredGranularity.value)
 
 const segmentValues = ref<SegmentValueObj>(modelValue.value ? { ...syncTimeSegmentValues({ value: convertedModelValue.value, formatter }) } : { ...initialSegments })
 

diff --git a/packages/core/src/shared/date/parser.ts b/packages/core/src/shared/date/parser.ts
@@ -39,7 +39,7 @@ export function syncSegmentValues(props: SyncDateSegmentValuesProps) {
   return Object.fromEntries(dateValues) as SegmentValueObj
 }
 
-export function initializeTimeSegmentValues(): SegmentValueObj {
+export function initializeTimeSegmentValues(granularity: 'hour' | 'minute' | 'second'): SegmentValueObj {
   return Object.fromEntries(
     TIME_SEGMENT_PARTS.map((part) => {
       if (part === 'dayPeriod')
@@ -48,6 +48,10 @@ export function initializeTimeSegmentValues(): SegmentValueObj {
     }).filter(([key]) => {
       if (key === 'literal' || key === null)
         return false
+      if (granularity === 'minute' && key === 'second')
+        return false
+      if (granularity === 'hour' && (key === 'second' || key === 'minute'))
+        return false
       else return true
     }),
   )
@@ -62,6 +66,10 @@ export function initializeSegmentValues(granularity: Granularity): SegmentValueO
   }).filter(([key]) => {
     if (key === 'literal' || key === null)
       return false
+    if (granularity === 'minute' && key === 'second')
+      return false
+    if (granularity === 'hour' && (key === 'second' || key === 'minute'))
+      return false
     if (granularity === 'day')
       return !calendarDateTimeGranularities.includes(key) && key !== 'dayPeriod'
     else return true