only months can be selected in transaction calendar mode

src/components/base/MonthSelectionBase.ts

@@ -0,0 +1,69 @@
+import { ref, computed } from 'vue';
+
+import type { YearMonth } from '@/core/datetime.ts';
+
+import {
+    getYearMonthObjectFromUnixTime,
+    getYearMonthObjectFromString,
+    getYearMonthStringFromObject,
+    getCurrentYear,
+    getThisMonthFirstUnixTime
+} from '@/lib/datetime.ts';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+export interface CommonMonthSelectionProps {
+    modelValue?: string;
+    title?: string;
+    hint?: string;
+    show: boolean;
+}
+
+function getYearMonthValueFromProps(props: CommonMonthSelectionProps): YearMonth {
+    let value: YearMonth = getYearMonthObjectFromUnixTime(getThisMonthFirstUnixTime());
+
+    if (props.modelValue) {
+        const yearMonth = getYearMonthObjectFromString(props.modelValue);
+
+        if (yearMonth) {
+            value = yearMonth;
+        }
+    }
+
+    return value;
+}
+
+export function useMonthSelectionBase(props: CommonMonthSelectionProps) {
+    const { isLongDateMonthAfterYear } = useI18n();
+
+    const yearRange = ref<number[]>([
+        2000,
+        getCurrentYear() + 1
+    ]);
+
+    const monthValue = ref<YearMonth>(getYearMonthValueFromProps(props));
+
+    const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
+
+    function getTextualYearMonth(): string | null {
+        if (!monthValue.value) {
+            return null;
+        }
+
+        if (monthValue.value.year <= 0 || monthValue.value.month < 0) {
+            throw new Error('Date is too early');
+        }
+
+        return getYearMonthStringFromObject(monthValue.value);
+    }
+
+    return {
+        // states
+        yearRange,
+        monthValue,
+        // computed states
+        isYearFirst,
+        // functions
+        getTextualYearMonth
+    };
+}