refactor(core): refactor component types

src/app/components/base/context-menu/ContextMenu.types.ts

@@ -1,5 +1,15 @@
+import { AppIcon } from '@components/base/icon/Icon.types';
+
 export const ContextMenuStoreKey = Symbol('ContextMenuStore');
 
 export interface ContextMenuStore {
   close(): void;
 }
+
+export type ContextMenuOptionId = number | string;
+
+export interface ContextMenuOption {
+  id: ContextMenuOptionId;
+  icon?: AppIcon;
+  label?: string;
+}

src/app/components/base/context-menu/ContextMenu.vue

@@ -30,11 +30,15 @@
 <script lang="ts" setup>
 import { createPopper, Modifier, Instance, Placement } from '@popperjs/core';
 import { computed, provide, ref, useCssModule, watch } from 'vue';
-import { ContextMenuStore, ContextMenuStoreKey } from '@components/base/context-menu/ContextMenu.types';
+import {
+  ContextMenuOption,
+  ContextMenuOptionId,
+  ContextMenuStore,
+  ContextMenuStoreKey
+} from '@components/base/context-menu/ContextMenu.types';
 import { useOutOfElementClick } from '@composables';
 import { ClassNames } from '@utils';
 import ContextMenuButton from './ContextMenuButton.vue';
-import { ContextMenuOption, ContextMenuOptionId } from '.';
 
 const emit = defineEmits<{
   (e: 'select', option: ContextMenuOption): void;

src/app/components/base/currency-cell/CurrencyCell.vue

@@ -8,7 +8,7 @@
     @focus="focus"
     @input="change"
     @keydown="keydown"
-    @keydown.enter="input?.blur"
+    @keydown.enter="input?.blur()"
   />
 </template>
 

src/app/components/base/draggable/Draggable.vue

@@ -28,8 +28,8 @@
 import { computed, ref } from 'vue';
 import Button from '@components/base/button/Button.vue';
 import { AppIcon } from '@components/base/icon/Icon.types';
+import { DraggableEvent, ReorderEvent } from './Draggable.types';
 import { store } from './store';
-import { DraggableEvent, ReorderEvent } from './types';
 
 const emit = defineEmits<{
   (e: 'drop', data: ReorderEvent): void;

src/app/components/base/text-cell/TextCell.vue

@@ -41,11 +41,7 @@ const classes = computed(() => [
 
 const focus = () => {
   focused.value = true;
-
-  nextTick(() => {
-    const element = input.value as HTMLInputElement;
-    element.select();
-  });
+  nextTick(() => (input.value as HTMLInputElement).select());
 };
 
 const change = (e: Event) => {

src/app/pages/navigation/currency/ChangeCurrencyButton.vue

@@ -14,7 +14,7 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Button from '@components/base/button/Button.vue';
-import { ContextMenuOption } from '@components/base/context-menu';
+import { ContextMenuOption } from '@components/base/context-menu/ContextMenu.types';
 import ContextMenu from '@components/base/context-menu/ContextMenu.vue';
 import { useDataStore } from '@store/state';
 import { availableCurrencies, AvailableCurrency } from '@store/state/types';

src/app/pages/navigation/language/ChangeLanguageButton.vue

@@ -14,7 +14,7 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Button from '@components/base/button/Button.vue';
-import { ContextMenuOption } from '@components/base/context-menu';
+import { ContextMenuOption } from '@components/base/context-menu/ContextMenu.types';
 import ContextMenu from '@components/base/context-menu/ContextMenu.vue';
 import { AvailableLocale, availableLocales } from '@i18n/index';
 import { useDataStore } from '@store/state';

src/app/pages/navigation/year/SelectYearButton.vue

@@ -15,7 +15,7 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Button from '@components/base/button/Button.vue';
-import { ContextMenuOption } from '@components/base/context-menu';
+import { ContextMenuOption } from '@components/base/context-menu/ContextMenu.types';
 import ContextMenu from '@components/base/context-menu/ContextMenu.vue';
 import { useMediaQuery, useTime } from '@composables';
 import { useDataStore } from '@store/state';

src/app/pages/shared/pane/BudgetGroup.vue

@@ -68,8 +68,8 @@ import { useI18n } from 'vue-i18n';
 import Button from '@components/base/button/Button.vue';
 import Currency from '@components/base/currency/Currency.vue';
 import CurrencyCell from '@components/base/currency-cell/CurrencyCell.vue';
+import { ReorderEvent, DraggableEvent } from '@components/base/draggable/Draggable.types';
 import Draggable from '@components/base/draggable/Draggable.vue';
-import { ReorderEvent, DraggableEvent } from '@components/base/draggable/types';
 import TextCell from '@components/base/text-cell/TextCell.vue';
 import { useDataStore } from '@store/state';
 import { BudgetGroup } from '@store/state/types';

src/app/pages/shared/pane/BudgetGroups.vue

@@ -41,8 +41,8 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Button from '@components/base/button/Button.vue';
 import Currency from '@components/base/currency/Currency.vue';
+import { DraggableEvent, ReorderEvent } from '@components/base/draggable/Draggable.types';
 import Draggable from '@components/base/draggable/Draggable.vue';
-import { DraggableEvent, ReorderEvent } from '@components/base/draggable/types';
 import { useMonthNames } from '@composables';
 import { useDataStore } from '@store/state';
 import BudgetGroup from './BudgetGroup.vue';