fix(VDatePicker): add missing transition between months

vuetifyjs · Mar 30, 2024 · 24c53d0 · 24c53d0
1 parent c008ad5
commit 24c53d0
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 70 deletions.
diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx b/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx
@@ -8,9 +8,10 @@ import { VDefaultsProvider } from '@/components/VDefaultsProvider'
 // Composables
 import { makeCalendarProps, useCalendar } from '@/composables/calendar'
 import { useDate } from '@/composables/date/date'
+import { MaybeTransition } from '@/composables/transition'
 
 // Utilities
-import { computed, ref, shallowRef } from 'vue'
+import { computed, ref, shallowRef, watch } from 'vue'
 import { genericComponent, propsFactory } from '@/util'
 
 // Types
@@ -31,6 +32,14 @@ export const makeVDatePickerMonthProps = propsFactory({
  hideWeekdays: Boolean,
  multiple: [Boolean, Number, String] as PropType<boolean | 'range' | number | (string & {})>,
  showWeek: Boolean,
+ transition: {
+ type: String,
+ default: 'picker-transition',
+ },
+ reverseTransition: {
+ type: String,
+ default: 'picker-reverse-transition',
+ },
 
  ...makeCalendarProps(),
 }, 'VDatePickerMonth')
@@ -54,6 +63,11 @@ export const VDatePickerMonth = genericComponent<VDatePickerMonthSlots>()({
 
  const rangeStart = shallowRef()
  const rangeStop = shallowRef()
+ const isReverse = shallowRef(false)
+
+ const transition = computed(() => {
+ return !isReverse.value ? props.transition : props.reverseTransition
+ })
 
  if (props.multiple === 'range' && model.value.length > 0) {
  rangeStart.value = model.value[0]
@@ -68,6 +82,12 @@ export const VDatePickerMonth = genericComponent<VDatePickerMonthSlots>()({
  return model.value.length >= max
  })
 
+ watch(daysInMonth, (val, oldVal) => {
+ if (!oldVal) return
+
+ isReverse.value = adapter.isBefore(val[0].date, oldVal[0].date)
+ })
+
  function onRangeClick (value: unknown) {
  const _value = adapter.startOfDay(value)
 
@@ -144,75 +164,78 @@ export const VDatePickerMonth = genericComponent<VDatePickerMonthSlots>()({
  </div>
  )}
 
- <div
- ref={ daysRef }
- class="v-date-picker-month__days"
- >
- { !props.hideWeekdays && adapter.getWeekdays().map(weekDay => (
- <div
- class={[
- 'v-date-picker-month__day',
- 'v-date-picker-month__weekday',
- ]}
- >{ weekDay }</div>
- ))}
-
- { daysInMonth.value.map((item, i) => {
- const slotProps = {
- props: {
- onClick: () => onClick(item.date),
- },
- item,
- i,
- } as const
-
- if (atMax.value && !item.isSelected) {
- item.isDisabled = true
- }
-
- return (
+ <MaybeTransition name={ transition.value }>
+ <div
+ ref={ daysRef }
+ key={ daysInMonth.value[0].date.toString() }
+ class="v-date-picker-month__days"
+ >
+ { !props.hideWeekdays && adapter.getWeekdays().map(weekDay => (
  <div
  class={[
  'v-date-picker-month__day',
- {
- 'v-date-picker-month__day--adjacent': item.isAdjacent,
- 'v-date-picker-month__day--hide-adjacent': item.isHidden,
- 'v-date-picker-month__day--selected': item.isSelected,
- 'v-date-picker-month__day--week-end': item.isWeekEnd,
- 'v-date-picker-month__day--week-start': item.isWeekStart,
- },
+ 'v-date-picker-month__weekday',
  ]}
- data-v-date={ !item.isDisabled ? item.isoDate : undefined }
- >
-
- { (props.showAdjacentMonths || !item.isAdjacent) && (
- <VDefaultsProvider
- defaults={{
- VBtn: {
- class: 'v-date-picker-month__day-btn',
- color: (item.isSelected || item.isToday) && !item.isDisabled
- ? props.color
- : undefined,
- disabled: item.isDisabled,
- icon: true,
- ripple: false,
- text: item.localized,
- variant: item.isDisabled
- ? item.isToday ? 'outlined' : 'text'
- : item.isToday && !item.isSelected ? 'outlined' : 'flat',
- onClick: () => onClick(item.date),
- },
- }}
- >
- { slots.day?.(slotProps) ?? (
- <VBtn { ...slotProps.props } />
- )}
- </VDefaultsProvider>
- )}
- </div>
- )
- })}
- </div>
+ >{ weekDay }</div>
+ ))}
+
+ { daysInMonth.value.map((item, i) => {
+ const slotProps = {
+ props: {
+ onClick: () => onClick(item.date),
+ },
+ item,
+ i,
+ } as const
+
+ if (atMax.value && !item.isSelected) {
+ item.isDisabled = true
+ }
+
+ return (
+ <div
+ class={[
+ 'v-date-picker-month__day',
+ {
+ 'v-date-picker-month__day--adjacent': item.isAdjacent,
+ 'v-date-picker-month__day--hide-adjacent': item.isHidden,
+ 'v-date-picker-month__day--selected': item.isSelected,
+ 'v-date-picker-month__day--week-end': item.isWeekEnd,
+ 'v-date-picker-month__day--week-start': item.isWeekStart,
+ },
+ ]}
+ data-v-date={ !item.isDisabled ? item.isoDate : undefined }
+ >
+
+ { (props.showAdjacentMonths || !item.isAdjacent) && (
+ <VDefaultsProvider
+ defaults={{
+ VBtn: {
+ class: 'v-date-picker-month__day-btn',
+ color: (item.isSelected || item.isToday) && !item.isDisabled
+ ? props.color
+ : undefined,
+ disabled: item.isDisabled,
+ icon: true,
+ ripple: false,
+ text: item.localized,
+ variant: item.isDisabled
+ ? item.isToday ? 'outlined' : 'text'
+ : item.isToday && !item.isSelected ? 'outlined' : 'flat',
+ onClick: () => onClick(item.date),
+ },
+ }}
+ >
+ { slots.day?.(slotProps) ?? (
+ <VBtn { ...slotProps.props } />
+ )}
+ </VDefaultsProvider>
+ )}
+ </div>
+ )
+ })}
+ </div>
+ </MaybeTransition>
  </div>
  )
  },

diff --git a/packages/vuetify/src/labs/VPicker/VPicker.sass b/packages/vuetify/src/labs/VPicker/VPicker.sass
@@ -16,6 +16,8 @@
 
 .v-picker__body
  grid-area: body
+ overflow: hidden
+ position: relative
 
 .v-picker__header
  grid-area: header

diff --git a/packages/vuetify/src/styles/generic/_transitions.scss b/packages/vuetify/src/styles/generic/_transitions.scss
@@ -95,23 +95,23 @@
  @include transition-default();
 
  &-enter-from {
- transform: translate(0, 100%);
+ transform: translate(100%, 0);
  }
 
  &-leave-to {
- transform: translate(0, -100%);
+ transform: translate(-100%, 0);
  }
 }
 
 .picker-reverse-transition {
  @include transition-default();
 
  &-enter-from {
- transform: translate(0, -100%);
+ transform: translate(-100%, 0);
  }
 
  &-leave-to {
- transform: translate(0, 100%);
+ transform: translate(100%, 0);
  }
 }