Improve date range UI (#663)

* wip improve date range ui

* simplify

* update classic calendar also

Author: aguingand

resources/js/components/ui/calendar/CalendarCell.vue

@@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 
 <template>
   <CalendarCell
-    :class="cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50', props.class)"
+    :class="cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent', props.class)"
     v-bind="forwardedProps"
   >
     <slot />

resources/js/components/ui/calendar/CalendarCellTrigger.vue

@@ -19,16 +19,16 @@ const forwardedProps = useForwardProps(delegatedProps)
   <CalendarCellTrigger
     :class="cn(
       buttonVariants({ variant: 'ghost' }),
-      'h-9 w-9 p-0 font-normal',
+         'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',
       '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
       // Selected
-      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-selected:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
       // Disabled
-      'data-[disabled]:text-muted-foreground data-disabled:opacity-50',
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
       // Unavailable
-      'data-[unavailable]:text-destructive-foreground data-unavailable:line-through',
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
       // Outside months
-      'data-outside-month:pointer-events-none data-[outside-month]:text-muted-foreground data-outside-month:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',
+      'data-[outside-view]:invisible data-[outside-view]:text-muted-foreground',
       props.class,
     )"
     v-bind="forwardedProps"

resources/js/components/ui/calendar/CalendarHeadCell.vue

@@ -15,7 +15,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <CalendarHeadCell :class="cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
+  <CalendarHeadCell :class="cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
     <slot />
   </CalendarHeadCell>
 </template>

resources/js/components/ui/range-calendar/RangeCalendar.vue

@@ -30,7 +30,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     </RangeCalendarHeader>
 
     <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
-      <RangeCalendarGrid v-for="month in grid" :key="month.value.toString()">
+      <RangeCalendarGrid v-for="(month, i) in grid" :key="month.value.toString()">
         <RangeCalendarGridHead>
           <RangeCalendarGridRow>
             <RangeCalendarHeadCell
@@ -46,6 +46,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
               v-for="weekDate in weekDates"
               :key="weekDate.toString()"
               :date="weekDate"
+                :month="month.value"
+                :month-index="i"
             >
               <RangeCalendarCellTrigger
                 :day="weekDate"

resources/js/components/ui/range-calendar/RangeCalendarCell.vue

@@ -1,9 +1,15 @@
 <script lang="ts" setup>
 import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'
+import {
+    injectRangeCalendarRootContext,
+    RangeCalendarCell,
+    type RangeCalendarCellProps,
+    useForwardProps
+} from 'reka-ui'
 import { cn } from '@/utils/cn'
+import { isSameMonth, DateValue } from '@internationalized/date';
 
-const props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'], month: DateValue, monthIndex: number }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -12,12 +18,24 @@ const delegatedProps = computed(() => {
 })
 
 const forwardedProps = useForwardProps(delegatedProps)
+const rootContext = injectRangeCalendarRootContext();
+const isNextMonthOutsideSelected = computed(() =>  isSameMonth(props.date, props.month.add({ months: 1 }))
+    && rootContext.startValue.value?.set({ day: 0 }).compare(props.month.set({ day: 0 })) <= 0
+    && rootContext.endValue.value?.set({ day: 0 }).compare(props.month.set({ day: 0 })) > 0);
+const isPreviousMonthOutsideSelected = computed(() => isSameMonth(props.date, props.month.subtract({ months: 1 }))
+    && rootContext.startValue.value?.set({ day: 0 }).compare(props.month.set({ day: 0 })) < 0
+    && rootContext.endValue.value?.set({ day: 0 }).compare(props.month.set({ day: 0 })) >= 0);
 </script>
 
 <template>
   <RangeCalendarCell
-    :class="cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-month])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)"
-    v-bind="forwardedProps"
+    :class="cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected][data-selection-end]:not([data-outside-view]))]:rounded-r-md [&:has([data-selected][data-selection-start]:not([data-outside-view]))]:rounded-l-md',
+        rootContext.isSelected(props.date) ? 'bg-accent' : '',
+        isNextMonthOutsideSelected ? 'bg-accent last:bg-transparent last:bg-linear-to-r last:from-accent last:to-transparent' : '',
+        isPreviousMonthOutsideSelected ? 'bg-accent first:bg-transparent first:bg-linear-to-l first:from-accent first:to-transparent' : '',
+        props.class
+    )"
+      v-bind="forwardedProps"
   >
     <slot />
   </RangeCalendarCell>

resources/js/components/ui/range-calendar/RangeCalendarCellTrigger.vue

@@ -19,18 +19,18 @@ const forwardedProps = useForwardProps(delegatedProps)
   <RangeCalendarCellTrigger
     :class="cn(
       buttonVariants({ variant: 'ghost' }),
-      'h-9 w-9 p-0 font-normal data-selected:opacity-100',
+       'size-8 p-0 font-normal data-[selected]:opacity-100 outline -outline-offset-1 outline-transparent hover:outline-primary',
       '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
       // Selection Start
       'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',
       // Selection End
       'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',
       // Outside months
-      'data-outside-month:pointer-events-none data-[outside-month]:text-muted-foreground data-outside-month:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',
+      'data-[outside-view]:invisible data-[outside-view]:text-muted-foreground/50! data-outside-view:bg-transparent!',
       // Disabled
-      'data-[disabled]:text-muted-foreground data-disabled:opacity-50',
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
       // Unavailable
-      'data-[unavailable]:text-destructive-foreground data-unavailable:line-through',
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
       props.class,
     )"
     v-bind="forwardedProps"

resources/js/components/ui/range-calendar/RangeCalendarHeadCell.vue

@@ -15,7 +15,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <RangeCalendarHeadCell :class="cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
+  <RangeCalendarHeadCell :class="cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
     <slot />
   </RangeCalendarHeadCell>
 </template>