update js dependencies

fittrackee_client/src/components/Common/Dropdown.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, watch } from 'vue'
+  import { ref, toRefs, watch } from 'vue'
   import { useRoute } from 'vue-router'
 
   import { IDropdownOption, TDropdownOptions } from '@/types/forms'
@@ -36,6 +36,7 @@
     buttonLabel: string
   }
   const props = defineProps<Props>()
+  const { options } = toRefs(props)
 
   const emit = defineEmits({
     selected: (option: IDropdownOption) => option,
@@ -43,7 +44,7 @@
 
   const route = useRoute()
   const isOpen = ref(false)
-  const dropdownOptions = props.options.map((option) => option)
+  const dropdownOptions = options.value.map((option) => option)
 
   function toggleDropdown() {
     isOpen.value = !isOpen.value

fittrackee_client/src/components/Dashboard/UserCalendar/index.vue

@@ -51,7 +51,7 @@
   const { sports, user } = toRefs(props)
   const dateFormat = 'yyyy-MM-dd'
   const day = ref(new Date())
-  const calendarDates = ref(getCalendarStartAndEnd(day.value, props.user.weekm))
+  const calendarDates = ref(getCalendarStartAndEnd(day.value, user.value.weekm))
   const calendarWorkouts: ComputedRef<IWorkout[]> = computed(
     () => store.getters[WORKOUTS_STORE.GETTERS.CALENDAR_WORKOUTS]
   )

fittrackee_client/src/components/Dashboard/UserMonthStats.vue

@@ -36,7 +36,7 @@
     start: startOfMonth(date),
     end: endOfMonth(date),
   }
-  const selectedSportIds = props.sports.map((sport) => sport.id)
+  const selectedSportIds = sports.value.map((sport) => sport.id)
 </script>
 
 <style lang="scss" scoped>

fittrackee_client/src/components/Statistics/index.vue

@@ -51,7 +51,7 @@
   const translatedSports: ComputedRef<ITranslatedSport[]> = computed(() =>
     translateSports(props.sports, t)
   )
-  const selectedSportIds: Ref<number[]> = ref(getSports(props.sports))
+  const selectedSportIds: Ref<number[]> = ref(getSports(sports.value))
 
   function updateTimeFrame(timeFrame: string) {
     selectedTimeFrame.value = timeFrame

fittrackee_client/src/components/User/ProfileEdition/TimezoneDropdown.vue

@@ -43,7 +43,7 @@
   const emit = defineEmits(['updateTimezone'])
 
   const { input, disabled } = toRefs(props)
-  const timezone: Ref<string> = ref(props.input)
+  const timezone: Ref<string> = ref(input.value)
   const isOpen: Ref<boolean> = ref(false)
   const tzList: Ref<HTMLInputElement | null> = ref(null)
   const focusItemIndex: Ref<number> = ref(0)

fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutChart/index.vue

@@ -52,7 +52,7 @@
 
 <script setup lang="ts">
   import { ChartData, ChartOptions } from 'chart.js'
-  import { ComputedRef, computed, ref } from 'vue'
+  import { ComputedRef, computed, ref, toRefs } from 'vue'
   import { LineChart, useLineChart } from 'vue-chart-3'
   import { useI18n } from 'vue-i18n'
 
@@ -77,10 +77,11 @@
 
   const { t } = useI18n()
 
+  const { authUser, workoutData } = toRefs(props)
   const displayDistance = ref(true)
-  const beginElevationAtZero = ref(props.authUser.start_elevation_at_zero)
+  const beginElevationAtZero = ref(authUser.value.start_elevation_at_zero)
   const datasets: ComputedRef<IWorkoutChartData> = computed(() =>
-    getDatasets(props.workoutData.chartData, t, props.authUser.imperial_units)
+    getDatasets(workoutData.value.chartData, t, authUser.value.imperial_units)
   )
   const hasElevation = computed(
     () => datasets.value && datasets.value.datasets.elevation.data.length > 0

fittrackee_client/src/components/Workout/WorkoutEdition.vue

@@ -345,7 +345,7 @@
     workoutDescent: '',
   })
   const withGpx = ref(
-    props.workout.id ? props.workout.with_gpx : props.isCreation
+    workout.value.id ? workout.value.with_gpx : isCreation.value
   )
   let gpxFile: File | null = null
   const formErrors = ref(false)