code refactor

src/components/desktop/DateRangeSelectionDialog.vue

@@ -61,6 +61,7 @@ import { type CommonDateRangeSelectionProps, useDateRangeSelectionBase } from '@
 
 import { useUserStore } from '@/stores/user.ts';
 
+import { type WeekDayValue } from '@/core/datetime.ts';
 import { ThemeType } from '@/core/theme.ts';
 
 import {
@@ -89,7 +90,7 @@ const { yearRange, dateRange, dayNames, isYearFirst, is24Hour, beginDateTime, en
 const userStore = useUserStore();
 
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
-const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
+const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
 const showState = computed<boolean>({
     get: () => props.show || false,
     set: (value) => emit('update:show', value)

src/components/desktop/DateSelect.vue

@@ -5,7 +5,7 @@
         :disabled="disabled"
         :clearable="modelValue ? clearable : false"
         :label="label"
-        :menu-props="{ 'content-class': 'date-select-menu' }"
+        :menu-props="{ contentClass: 'date-select-menu' }"
         v-model="dateTime"
     >
         <template #selection>
@@ -44,6 +44,7 @@ import { useI18n } from '@/locales/helpers.ts';
 
 import { useUserStore } from '@/stores/user.ts';
 
+import { type WeekDayValue } from '@/core/datetime.ts';
 import { ThemeType } from '@/core/theme.ts';
 import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
 import { getCurrentYear } from '@/lib/datetime.ts';
@@ -76,7 +77,7 @@ const dateTime = computed<string>({
 });
 
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
-const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
+const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
 const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
 const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
 const displayTime = computed<string>(() => {

src/components/desktop/DateTimeSelect.vue

@@ -4,7 +4,7 @@
         :readonly="readonly"
         :disabled="disabled"
         :label="label"
-        :menu-props="{ 'content-class': 'date-time-select-menu' }"
+        :menu-props="{ contentClass: 'date-time-select-menu' }"
         v-model="dateTime"
     >
         <template #selection>
@@ -45,6 +45,7 @@ import { useI18n } from '@/locales/helpers.ts';
 
 import { useUserStore } from '@/stores/user.ts';
 
+import { type WeekDayValue } from '@/core/datetime.ts';
 import { ThemeType } from '@/core/theme.ts';
 import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
 import {
@@ -95,7 +96,7 @@ const dateTime = computed<Date>({
 });
 
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
-const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
+const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
 const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
 const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
 const is24Hour = computed<boolean>(() => isLongTime24HourFormat());

src/components/desktop/ScheduleFrequencySelect.vue

@@ -4,7 +4,7 @@
         :readonly="readonly"
         :disabled="disabled"
         :label="label"
-        :menu-props="{ 'content-class': 'schedule-frequency-select-menu' }"
+        :menu-props="{ contentClass: 'schedule-frequency-select-menu' }"
         v-model="frequencyType"
         v-model:menu="menuState"
         @update:menu="onMenuStateChanged"
@@ -62,6 +62,7 @@ import { type CommonScheduleFrequencySelectionProps, useScheduleFrequencySelecti
 
 import { useUserStore } from '@/stores/user.ts';
 
+import { type WeekDayValue } from '@/core/datetime.ts';
 import { ScheduledTemplateFrequencyType } from '@/core/template.ts';
 import { sortNumbersArray } from '@/lib/common.ts';
 import { scrollToSelectedItem } from '@/lib/ui/desktop.ts';
@@ -81,7 +82,7 @@ const dropdownMenu = useTemplateRef<HTMLElement>('dropdownMenu');
 
 const menuState = ref<boolean>(false);
 
-const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
+const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
 
 const frequencyType = computed<number>({
     get: () => props.type,

src/components/desktop/TwoColumnSelect.vue

@@ -6,7 +6,7 @@
         :readonly="readonly"
         :disabled="disabled"
         :label="label"
-        :menu-props="{ 'content-class': 'two-column-select-menu' }"
+        :menu-props="{ contentClass: 'two-column-select-menu' }"
         v-model="currentSecondaryValue"
         v-model:menu="menuState"
         @update:menu="onMenuStateChanged"
@@ -41,7 +41,7 @@
                 <div class="primary-list-container">
                     <v-list :class="{ 'list-item-with-header': !!primaryHeaderField, 'list-item-with-footer': !!primaryFooterField }">
                         <v-list-item :class="{ 'primary-list-item-selected v-list-item--active text-primary': item === selectedPrimaryItem }"
-                                     :key="primaryKeyField ? (item as Record<string, unknown>)[primaryKeyField] : item"
+                                     :key="primaryKeyField ? (item as Record<string, unknown>)[primaryKeyField] as string : JSON.stringify(item)"
                                      v-for="item in filteredItems"
                                      @click="onPrimaryItemClicked(item)">
                             <template #prepend>
@@ -60,7 +60,7 @@
                     <v-list :class="{ 'list-item-with-header': !!secondaryHeaderField, 'list-item-with-footer': !!secondaryFooterField }"
                             v-if="selectedPrimaryItem && primarySubItemsField && (selectedPrimaryItem as Record<string, unknown>)[primarySubItemsField]">
                         <v-list-item :class="{ 'secondary-list-item-selected v-list-item--active text-primary': isSecondarySelected(subItem) }"
-                                     :key="secondaryKeyField ? subItem[secondaryKeyField] : subItem"
+                                     :key="secondaryKeyField ? subItem[secondaryKeyField] as string : JSON.stringify(subItem)"
                                      v-for="subItem in filteredSubItems"
                                      @click="onSecondaryItemClicked(subItem)">
                             <template #prepend>