feat: make the next/previous buttons adapt to current panel type

formwerkjs · Feb 9, 2025 · ef961db · ef961db
1 parent 0cb687c
commit ef961db
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 32 deletions.
diff --git a/packages/core/src/useCalendar/useCalendar.ts b/packages/core/src/useCalendar/useCalendar.ts
@@ -192,17 +192,37 @@ export function useCalendar(_props: Reactivify<CalendarProps, 'onDaySelected'> =
     );
   });
 
-  const nextMonthButtonProps = useControlButtonProps(() => ({
-    id: `${calendarId}-next-month`,
+  const nextPanelButtonProps = useControlButtonProps(() => ({
+    id: `${calendarId}-next`,
     onClick: () => {
-      context.setFocusedDate(context.getFocusedDate().add({ months: 1 }));
+      if (currentPanel.value.type === 'day') {
+        context.setFocusedDate(context.getFocusedDate().add({ months: 1 }));
+        return;
+      }
+
+      if (currentPanel.value.type === 'month') {
+        context.setFocusedDate(context.getFocusedDate().add({ years: 1 }));
+        return;
+      }
+
+      context.setFocusedDate(currentPanel.value.years[currentPanel.value.years.length - 1].value.add({ years: 1 }));
     },
   }));
 
-  const previousMonthButtonProps = useControlButtonProps(() => ({
-    id: `${calendarId}-previous-month`,
+  const previousPanelButtonProps = useControlButtonProps(() => ({
+    id: `${calendarId}-previous`,
     onClick: () => {
-      context.setFocusedDate(context.getFocusedDate().subtract({ months: 1 }));
+      if (currentPanel.value.type === 'day') {
+        context.setFocusedDate(context.getFocusedDate().subtract({ months: 1 }));
+        return;
+      }
+
+      if (currentPanel.value.type === 'month') {
+        context.setFocusedDate(context.getFocusedDate().subtract({ years: 1 }));
+        return;
+      }
+
+      context.setFocusedDate(currentPanel.value.years[0].value.subtract({ years: 1 }));
     },
   }));
 
@@ -212,7 +232,7 @@ export function useCalendar(_props: Reactivify<CalendarProps, 'onDaySelected'> =
     label: panelLabel,
   });
 
-  const monthYearLabelProps = computed(() => {
+  const panelLabelProps = computed(() => {
     return withRefCapture(
       {
         ...monthYearLabelBaseProps.value,
@@ -235,7 +255,7 @@ export function useCalendar(_props: Reactivify<CalendarProps, 'onDaySelected'> =
     );
   });
 
-  const gridProps = computed(() => {
+  const panelGridProps = computed(() => {
     return withRefCapture(
       {
         id: `${calendarId}-g`,
@@ -259,9 +279,9 @@ export function useCalendar(_props: Reactivify<CalendarProps, 'onDaySelected'> =
      */
     pickerProps,
     /**
-     * The props for the grid element.
+     * The props for the grid element that displays the panel values.
      */
-    gridProps,
+    panelGridProps,
     /**
      * The props for the button element.
      */
@@ -270,10 +290,6 @@ export function useCalendar(_props: Reactivify<CalendarProps, 'onDaySelected'> =
      * The current date.
      */
     selectedDate,
-    /**
-     * The grid element.
-     */
-    gridEl,
     /**
      * The current panel.
      */
@@ -283,21 +299,21 @@ export function useCalendar(_props: Reactivify<CalendarProps, 'onDaySelected'> =
      */
     switchPanel,
     /**
-     * The props for the month and year label element.
+     * The props for the panel label element.
      */
-    monthYearLabelProps,
+    panelLabelProps,
     /**
-     * The props for the next month button.
+     * The props for the next panel values button. if it is a day panel, the button will move the panel to the next month. If it is a month panel, the button will move the panel to the next year. If it is a year panel, the button will move the panel to the next set of years.
      */
-    nextMonthButtonProps,
+    nextPanelButtonProps,
     /**
-     * The props for the previous month button.
+     * The props for the previous panel values button. If it is a day panel, the button will move the panel to the previous month. If it is a month panel, the button will move the panel to the previous year. If it is a year panel, the button will move the panel to the previous set of years.
      */
-    previousMonthButtonProps,
+    previousPanelButtonProps,
     /**
-     * The month and year label.
+     * The label for the current panel. If it is a day panel, the label will be the month and year. If it is a month panel, the label will be the year. If it is a year panel, the label will be the range of years currently being displayed.
      */
-    monthYearLabel: panelLabel,
+    panelLabel,
   };
 }
 

diff --git a/packages/playground/src/components/DateField.vue b/packages/playground/src/components/DateField.vue
@@ -17,12 +17,12 @@ const {
 
 const {
   pickerProps,
-  gridProps,
+  panelGridProps,
   buttonProps,
-  nextMonthButtonProps,
-  previousMonthButtonProps,
-  monthYearLabelProps: calendarLabelProps,
-  monthYearLabel,
+  nextPanelButtonProps,
+  previousPanelButtonProps,
+  panelLabelProps,
+  panelLabel,
   currentPanel,
 } = useCalendar(calendarProps);
 </script>
@@ -43,16 +43,16 @@ const {
 
     <div popover class="bg-zinc-800 px-4 py-4" v-bind="pickerProps">
       <div class="flex items-center justify-between text-white my-4">
-        <button v-bind="previousMonthButtonProps">⬆️</button>
+        <button v-bind="previousPanelButtonProps">⬆️</button>
 
-        <span v-bind="calendarLabelProps">
-          {{ monthYearLabel }}
+        <span v-bind="panelLabelProps">
+          {{ panelLabel }}
         </span>
 
-        <button v-bind="nextMonthButtonProps">⬇️</button>
+        <button v-bind="nextPanelButtonProps">⬇️</button>
       </div>
 
-      <div class="gap-4" :dir="direction" v-bind="gridProps">
+      <div class="gap-4" :dir="direction" v-bind="panelGridProps">
         <template v-if="currentPanel.type === 'day'">
           <div
             v-for="day in currentPanel.daysOfTheWeek"