code refactor

src/components/common/MapView.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref, computed, useTemplateRef } from 'vue';
+import { ref, computed, useTemplateRef } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
@@ -27,12 +27,12 @@ const props = defineProps<{
 const { tt, getCurrentLanguageInfo } = useI18n();
 
 const mapContainer = useTemplateRef<HTMLElement>('mapContainer');
-const mapInstance: Ref<MapInstance | null> = ref(createMapInstance());
-const initCenter: Ref<MapPosition> = ref({
+const mapInstance = ref<MapInstance | null>(createMapInstance());
+const initCenter = ref<MapPosition>({
     latitude: 0,
     longitude: 0
 });
-const zoomLevel: Ref<number> = ref(1);
+const zoomLevel = ref<number>(1);
 
 const mapSupported = computed<boolean>(() => {
     return !!mapInstance.value;
@@ -56,7 +56,7 @@ const finalMapStyle = computed<Record<string, unknown>>(() => {
     return styles;
 });
 
-function initMapView() {
+function initMapView(): void {
     let isFirstInit = false;
     let centerChanged = false;
 

src/components/common/PinCodeInput.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref, computed, watch, useTemplateRef } from 'vue';
+import { ref, computed, watch, useTemplateRef } from 'vue';
 
 interface PinCode {
     value: string;
@@ -38,11 +38,11 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: string): void
-    (e: 'pincode:confirm', value: string): void
+    (e: 'update:modelValue', value: string): void;
+    (e: 'pincode:confirm', value: string): void;
 }>();
 
-const codes: Ref<PinCode[]> = ref([]);
+const codes = ref<PinCode[]>([]);
 const pinCodeInputs = useTemplateRef<HTMLInputElement[]>('pin-code-input');
 
 const finalPinCode = computed<string>(() => {

src/components/desktop/BtnVerticalGroup.vue

@@ -25,7 +25,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: unknown): void
+    (e: 'update:modelValue', value: unknown): void;
 }>();
 
 const value = computed<unknown>({

src/components/desktop/ColorSelect.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref, computed, useTemplateRef, nextTick } from 'vue';
+import { ref, computed, useTemplateRef, nextTick } from 'vue';
 
 import type { ColorValue, ColorInfo } from '@/core/color.ts';
 import { DEFAULT_ICON_COLOR } from '@/consts/color.ts';
@@ -61,7 +61,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: ColorValue): void
+    (e: 'update:modelValue', value: ColorValue): void;
 }>();
 
 const icons = {
@@ -70,7 +70,7 @@ const icons = {
 };
 
 const dropdownMenu = useTemplateRef<HTMLElement>('dropdownMenu');
-const itemPerRow: Ref<number> = ref(props.columnCount || 7);
+const itemPerRow = ref<number>(props.columnCount || 7);
 
 const allColorRows = computed<ColorInfo[][]>(() => {
     return getColorsInRows(props.allColorInfos, itemPerRow.value);

src/components/desktop/ConfirmDialog.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
@@ -29,20 +29,20 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:show', value: boolean): void
+    (e: 'update:show', value: boolean): void;
 }>();
 
 const { tt } = useI18n();
 
-const showState: Ref<boolean> = ref(false);
-const titleContent: Ref<string> = ref(props.title || tt('global.app.title'));
-const textContent: Ref<string> = ref(props.text || '');
-const finalColor: Ref<string> = ref(props.color || 'primary');
+const showState = ref<boolean>(false);
+const titleContent = ref<string>(props.title || tt('global.app.title'));
+const textContent = ref<string>(props.text || '');
+const finalColor = ref<string>(props.color || 'primary');
 
 let resolveFunc: ((value?: unknown) => void) | null = null;
 let rejectFunc: ((reason?: unknown) => void) | null = null;
 
-function open(titleOrText: string, textOrOptions: string | Record<string, unknown>, options: Record<string, unknown>) {
+function open(titleOrText: string, textOrOptions: string | Record<string, unknown>, options: Record<string, unknown>): Promise<unknown> {
     showState.value = true;
 
     if (isString(textOrOptions)) { // second parameter is text

src/components/desktop/IconSelect.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref, computed, useTemplateRef, nextTick } from 'vue';
+import { ref, computed, useTemplateRef, nextTick } from 'vue';
 
 import type { ColorValue } from '@/core/color.ts';
 import type { IconInfo, IconInfoWithId } from '@/core/icon.ts';
@@ -60,7 +60,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: string): void
+    (e: 'update:modelValue', value: string): void;
 }>();
 
 const icons = {
@@ -68,13 +68,13 @@ const icons = {
 };
 
 const dropdownMenu = useTemplateRef<HTMLElement>('dropdownMenu');
-const itemPerRow: Ref<number> = ref(props.columnCount || 7);
+const itemPerRow = ref<number>(props.columnCount || 7);
 
 const allIconRows = computed<IconInfoWithId[][]>(() => {
     return getIconsInRows(props.allIconInfos, itemPerRow.value);
 });
 
-const icon = computed({
+const icon = computed<string>({
     get: () => props.modelValue,
     set: (value: string) => emit('update:modelValue', value)
 });

src/components/desktop/SnackBar.vue

@@ -9,20 +9,20 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
 import { isObject } from '@/lib/common.ts';
 
 const emit = defineEmits<{
-    (e: 'update:show', value: boolean): void
+    (e: 'update:show', value: boolean): void;
 }>();
 
 const { tt, te } = useI18n();
 
-const showState: Ref<boolean> = ref(false);
-const messageContent: Ref<string> = ref('');
+const showState= ref<boolean>(false);
+const messageContent = ref<string>('');
 
 function showMessage(message: string, options: Record<string, unknown>): void {
     showState.value = true;
@@ -35,7 +35,7 @@ function showError(error: string | { message: string }): void {
     if (isObject(error) && (error as { message: string }).message) {
         messageContent.value = te((error as { message: string }).message);
     } else {
-        messageContent.value = te(error);
+        messageContent.value = te(error as string);
     }
 }
 

src/components/desktop/StepsBar.vue

@@ -60,7 +60,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'step:change', stepName: string): void
+    (e: 'step:change', stepName: string): void;
 }>();
 
 const isClickable = computed<boolean>(() => {

src/components/desktop/SwitchToMobileDialog.vue

@@ -41,7 +41,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:show', value: boolean): void
+    (e: 'update:show', value: boolean): void;
 }>();
 
 const { tt } = useI18n();

src/components/mobile/ColorSelectionSheet.vue

@@ -29,14 +29,14 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref, computed } from 'vue';
+import { ref, computed } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
 import type { ColorValue, ColorInfo } from '@/core/color.ts';
 import { arrayContainsFieldValue } from '@/lib/common.ts';
 import { getColorsInRows } from '@/lib/color.ts';
-import { scrollToSelectedItem } from '@/lib/ui/mobile.ts';
+import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
 
 const props = defineProps<{
     modelValue: ColorValue;
@@ -46,34 +46,34 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: ColorValue): void
-    (e: 'update:show', value: boolean): void
+    (e: 'update:modelValue', value: ColorValue): void;
+    (e: 'update:show', value: boolean): void;
 }>();
 
 const { tt } = useI18n();
 
-const currentValue: Ref<ColorValue> = ref(props.modelValue);
-const itemPerRow: Ref<number> = ref(props.columnCount || 7);
+const currentValue = ref<ColorValue>(props.modelValue);
+const itemPerRow = ref<number>(props.columnCount || 7);
 
 const allColorRows = computed<ColorInfo[][]>(() => {
     return getColorsInRows(props.allColorInfos, itemPerRow.value);
 });
 
-function onColorClicked(colorInfo: ColorInfo) {
+function onColorClicked(colorInfo: ColorInfo): void {
     currentValue.value = colorInfo.color;
     emit('update:modelValue', currentValue.value);
 }
 
-function hasSelectedIcon(row: ColorInfo[]) {
+function hasSelectedIcon(row: ColorInfo[]): boolean {
     return arrayContainsFieldValue(row, 'id', currentValue.value);
 }
 
-function onSheetOpen(event: { $el: HTMLElement }) {
+function onSheetOpen(event: { $el: Framework7Dom }): void {
     currentValue.value = props.modelValue;
     scrollToSelectedItem(event.$el, '.page-content', '.row-has-selected-item');
 }
 
-function onSheetClosed() {
+function onSheetClosed(): void {
     emit('update:show', false);
 }
 </script>

src/components/mobile/IconSelectionSheet.vue

@@ -29,14 +29,14 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref, computed } from 'vue';
+import { ref, computed } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
 import type { IconInfo, IconInfoWithId } from '@/core/icon.ts';
 import { arrayContainsFieldValue } from '@/lib/common.ts';
 import { getIconsInRows } from '@/lib/icon.ts';
-import { scrollToSelectedItem } from '@/lib/ui/mobile.ts';
+import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
 
 const props = defineProps<{
     modelValue: string;
@@ -47,14 +47,14 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: string): void
-    (e: 'update:show', value: boolean): void
+    (e: 'update:modelValue', value: string): void;
+    (e: 'update:show', value: boolean): void;
 }>();
 
 const { tt } = useI18n();
 
-const currentValue: Ref<string> = ref(props.modelValue);
-const itemPerRow: Ref<number> = ref(props.columnCount || 7);
+const currentValue = ref<string>(props.modelValue);
+const itemPerRow = ref<number>(props.columnCount || 7);
 
 const allIconRows = computed<IconInfoWithId[][]>(() => {
     return getIconsInRows(props.allIconInfos, itemPerRow.value);
@@ -70,20 +70,20 @@ const heightClass = computed<string>(() => {
     }
 });
 
-function onIconClicked(iconInfo: IconInfoWithId) {
+function onIconClicked(iconInfo: IconInfoWithId): void {
     currentValue.value = iconInfo.id;
     emit('update:modelValue', currentValue.value);
 }
 
-function hasSelectedIcon(row: IconInfoWithId[]) {
+function hasSelectedIcon(row: IconInfoWithId[]): boolean {
     return arrayContainsFieldValue(row, 'id', currentValue.value);
 }
 
-function onSheetOpen(event: { $el: HTMLElement }) {
+function onSheetOpen(event: { $el: Framework7Dom }): void {
     scrollToSelectedItem(event.$el, '.page-content', '.row-has-selected-item');
 }
 
-function onSheetClosed() {
+function onSheetClosed(): void {
     emit('update:show', false);
 }
 </script>

src/components/mobile/InformationSheet.vue

@@ -41,17 +41,17 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:show', value: boolean): void
-    (e: 'info:copied'): void
+    (e: 'update:show', value: boolean): void;
+    (e: 'info:copied'): void;
 }>();
 
 const { tt } = useI18n();
 
-const iconCopyToClipboard = useTemplateRef('copyToClipboardIcon');
+const iconCopyToClipboard = useTemplateRef<unknown>('copyToClipboardIcon');
 
 let clipboardHolder: ClipboardHolder | null = null;
 
-function makeCopyToClipboardClickable() {
+function makeCopyToClipboardClickable(): void {
     if (clipboardHolder) {
         return;
     }
@@ -67,11 +67,11 @@ function makeCopyToClipboardClickable() {
     }
 }
 
-function close() {
+function close(): void {
     emit('update:show', false);
 }
 
-function onSheetClosed() {
+function onSheetClosed(): void {
     close();
 }
 

src/components/mobile/MapSheet.vue

@@ -46,8 +46,8 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: MapPosition | undefined): void,
-    (e: 'update:show', value: boolean): void
+    (e: 'update:modelValue', value: MapPosition | undefined): void;
+    (e: 'update:show', value: boolean): void;
 }>();
 
 const { tt } = useI18n();
@@ -63,21 +63,21 @@ const geoLocation = computed<MapPosition | undefined>({
     }
 });
 
-function save() {
+function save(): void {
     emit('update:show', false);
 }
 
-function close() {
+function close(): void {
     emit('update:show', false);
 }
 
-function onSheetOpen() {
+function onSheetOpen(): void {
     if (map.value) {
         map.value.initMapView();
     }
 }
 
-function onSheetClosed() {
+function onSheetClosed(): void {
     close();
 }
 </script>

src/components/mobile/NumberPadSheet.vue

@@ -66,7 +66,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref, computed } from 'vue';
+import { ref, computed } from 'vue';
 
 import { useI18n } from '@/locales/helper.js';
 import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
@@ -95,13 +95,13 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: number): void,
-    (e: 'update:show', value: boolean): void
+    (e: 'update:modelValue', value: number): void;
+    (e: 'update:show', value: boolean): void;
 }>();
 
-const previousValue: Ref<string> = ref('');
-const currentSymbol: Ref<string> = ref('');
-const currentValue: Ref<string> = ref(getStringValue(props.modelValue));
+const previousValue = ref<string>('');
+const currentSymbol = ref<string>('');
+const currentValue = ref<string>(getStringValue(props.modelValue));
 
 const decimalSeparator = computed<string>(() => getCurrentDecimalSeparator(userStore));
 

src/components/mobile/PasscodeInputSheet.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref } from 'vue';
+import { ref } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
@@ -51,16 +51,16 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: string): void
-    (e: 'update:show', value: boolean): void
-    (e: 'passcode:confirm', value: string): void
+    (e: 'update:modelValue', value: string): void;
+    (e: 'update:show', value: boolean): void;
+    (e: 'passcode:confirm', value: string): void;
 }>();
 
 const { tt } = useI18n();
 
-const currentPasscode: Ref<string> = ref('');
+const currentPasscode = ref<string>('');
 
-function confirm() {
+function confirm(): void {
     if (!currentPasscode.value || props.confirmDisabled) {
         return;
     }
@@ -69,19 +69,19 @@ function confirm() {
     emit('passcode:confirm', currentPasscode.value);
 }
 
-function cancel() {
+function cancel(): void {
     close();
 }
 
-function close() {
+function close(): void {
     emit('update:show', false);
 }
 
-function onSheetOpen() {
+function onSheetOpen(): void {
     currentPasscode.value = '';
 }
 
-function onSheetClosed() {
+function onSheetClosed(): void {
     close();
 }
 </script>

src/components/mobile/PasswordInputSheet.vue

@@ -38,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref } from 'vue';
+import { ref } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
@@ -53,16 +53,16 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: string): void
-    (e: 'update:show', value: boolean): void
-    (e: 'password:confirm', value: string): void
+    (e: 'update:modelValue', value: string): void;
+    (e: 'update:show', value: boolean): void;
+    (e: 'password:confirm', value: string): void;
 }>();
 
 const { tt } = useI18n();
 
-const currentPassword: Ref<string> = ref('');
+const currentPassword = ref<string>('');
 
-function confirm() {
+function confirm(): void {
     if (!currentPassword.value || props.confirmDisabled) {
         return;
     }
@@ -71,19 +71,19 @@ function confirm() {
     emit('password:confirm', currentPassword.value);
 }
 
-function cancel() {
+function cancel(): void {
     close();
 }
 
-function close() {
+function close(): void {
     emit('update:show', false);
 }
 
-function onSheetOpen() {
+function onSheetOpen(): void {
     currentPassword.value = '';
 }
 
-function onSheetClosed() {
+function onSheetClosed(): void {
     close();
 }
 </script>

src/components/mobile/PinCodeInputSheet.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref, computed } from 'vue';
+import { ref, computed } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
@@ -41,20 +41,20 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: string): void
-    (e: 'update:show', value: boolean): void
-    (e: 'pincode:confirm', value: string): void
+    (e: 'update:modelValue', value: string): void;
+    (e: 'update:show', value: boolean): void;
+    (e: 'pincode:confirm', value: string): void;
 }>();
 
 const { tt } = useI18n();
 
-const currentPinCode: Ref<string> = ref('');
+const currentPinCode = ref<string>('');
 
 const currentPinCodeValid = computed<boolean>(() => {
     return currentPinCode.value?.length === 6 || false;
 });
 
-function confirm() {
+function confirm(): void {
     if (!currentPinCodeValid.value || props.confirmDisabled) {
         return;
     }
@@ -63,15 +63,15 @@ function confirm() {
     emit('pincode:confirm', currentPinCode.value);
 }
 
-function cancel() {
+function cancel(): void {
     emit('update:show', false);
 }
 
-function onSheetOpen() {
+function onSheetOpen(): void {
     currentPinCode.value = '';
 }
 
-function onSheetClosed() {
+function onSheetClosed(): void {
     cancel();
 }
 </script>