fds-vue-core 6.2.7 → 6.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fds-vue-core",
-  "version": "6.2.7",
+  "version": "6.2.8",
   "description": "FDS Vue Core Component Library",
   "type": "module",
   "main": "./dist/fds-vue-core.cjs.js",

package/src/components/FdsWeekCalendar/FdsWeekCalendar.stories.ts

@@ -9,7 +9,7 @@ const meta: Meta<typeof FdsWeekCalendar> = {
   tags: ['autodocs'],
   parameters: {
     actions: {
-      handles: ['change-date-range', 'change-selected-day', 'increment-week', 'decrement-week'],
+      handles: ['change-date-range', 'select-date', 'increment-week', 'decrement-week'],
     },
   },
   argTypes: {

package/src/components/FdsWeekCalendar/FdsWeekCalendar.vue

@@ -1,14 +1,5 @@
 <script setup lang="ts">
-import {
-  addWeeks,
-  getISODay,
-  getISOWeek,
-  isBefore,
-  isSameDay,
-  isSameWeek,
-  startOfISOWeek,
-  subWeeks,
-} from 'date-fns'
+import { addWeeks, getISODay, getISOWeek, isBefore, isSameDay, isSameWeek, startOfISOWeek, subWeeks } from 'date-fns'
 import { computed, ref, watch } from 'vue'
 import FdsButtonIcon from '../Buttons/FdsButtonIcon/FdsButtonIcon.vue'
 import FdsSpinner from '../FdsSpinner/FdsSpinner.vue'
@@ -122,6 +113,18 @@ watch(
   },
 )
 
+watch(
+  () => props.goToWeek?.getTime(),
+  (newTimestamp) => {
+    if (!newTimestamp) return
+    const normalizedWeek = startOfISOWeek(new Date(newTimestamp))
+    if (isSameWeek(normalizedWeek, currentWeek.value, { weekStartsOn: 1 })) return
+    slideDirection.value = normalizedWeek.getTime() > currentWeek.value.getTime() ? 'left' : 'right'
+    onHandleSetCurrentWeek(normalizedWeek)
+  },
+  { immediate: true },
+)
+
 const onHandleSelectedDay = (weekDay: Date | null) => {
   selectedDay.value = weekDay
   emit('select-date', weekDay)
@@ -134,18 +137,26 @@ const onHandleSetCurrentWeek = (week: Date) => {
   currentWeek.value = week
 }
 
+const navigateToWeek = (week: Date) => {
+  const normalizedWeek = startOfISOWeek(week)
+  if (isSameWeek(normalizedWeek, currentWeek.value, { weekStartsOn: 1 })) return
+
+  const isForward = normalizedWeek.getTime() > currentWeek.value.getTime()
+  if (isForward && disableNextWeekInteraction.value) return
+  if (!isForward && disableLastWeekInteraction.value) return
+
+  slideDirection.value = isForward ? 'left' : 'right'
+  onHandleSetCurrentWeek(normalizedWeek)
+}
+
 const incrementWeek = () => {
-  if (disableNextWeekInteraction.value) return
-  slideDirection.value = 'left'
   emit('increment-week')
-  onHandleSetCurrentWeek(addWeeks(currentWeek.value, 1))
+  navigateToWeek(addWeeks(currentWeek.value, 1))
 }
 
 const decrementWeek = () => {
-  if (disableLastWeekInteraction.value) return
-  slideDirection.value = 'right'
   emit('decrement-week')
-  onHandleSetCurrentWeek(subWeeks(currentWeek.value, 1))
+  navigateToWeek(subWeeks(currentWeek.value, 1))
 }
 
 const isWeekDayDisabled = (weekDay: Date) =>

package/src/components/FdsWeekCalendar/types.ts

@@ -17,6 +17,7 @@ export interface FdsWeekCalendarProps extends /* @vue-ignore */ HTMLAttributes {
   disableNextWeek?: boolean
   enableHorizontalAnimation?: boolean
   minWeek?: Date
+  goToWeek?: Date
   maxDate?: Date
   previewOtherDays?: boolean
   selected?: Date | null