Merge pull request #411 from traPtitech/dependabot/npm_and_yarn/vue-t…

…sc-2.2.0

build(deps-dev): bump vue-tsc from 2.1.10 to 2.2.0

package.json

@@ -45,7 +45,7 @@
     "typescript-eslint": "^8.16.0",
     "vite": "^6.0.6",
     "vitest": "^2.1.8",
-    "vue-tsc": "2.1.10"
+    "vue-tsc": "2.2.0"
   },
   "private": true,
   "type": "module"

src/components/Contests/ContestItem.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Contest } from '/@/lib/apis'
-import Icon from '/@/components/UI/Icon.vue'
+import AIcon from '/@/components/UI/AIcon.vue'
 import { getFullDayString } from '/@/lib/date'
 
 interface Props {
@@ -20,7 +20,7 @@ defineProps<Props>()
         {{ contest.name }}
       </p>
       <p :class="$style.duration">
-        <icon name="mdi:calendar" />
+        <a-icon name="mdi:calendar" />
         {{ getFullDayString(new Date(contest.duration.since)) }}
       </p>
     </div>

src/components/Events/EventItem.vue

@@ -2,7 +2,7 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 
 import apis, { Event, EditEventRequest, EventLevel } from '/@/lib/apis'
-import Icon from '/@/components/UI/Icon.vue'
+import AIcon from '/@/components/UI/AIcon.vue'
 import { getFullDayString } from '/@/lib/date'
 import EventLevelMenu from '/@/components/Events/EventLevelMenu.vue'
 import {
@@ -61,7 +61,7 @@ onUnmounted(() => {
         {{ event.name }}
       </p>
       <p :class="$style.duration">
-        <icon name="mdi:calendar" />
+        <a-icon name="mdi:calendar" />
         {{ getFullDayString(new Date(event.duration.since)) }}
       </p>
     </router-link>
@@ -79,7 +79,7 @@ onUnmounted(() => {
           :class="$style.icon"
           :is-menu-open="displayMenu"
         >
-          <icon name="mdi:chevron-down" />
+          <a-icon name="mdi:chevron-down" />
         </span>
       </button>
       <event-level-menu

src/components/Index/PageInfoPanel.vue

@@ -5,7 +5,7 @@
       :class="$style.link"
     >
       <div :class="$style.container">
-        <icon
+        <a-icon
           :name="routeInfo.icon"
           :class="$style.icon"
           :size="72"
@@ -25,7 +25,7 @@
 
 <script lang="ts" setup>
 import { toRef } from 'vue'
-import Icon from '/@/components/UI/Icon.vue'
+import AIcon from '/@/components/UI/AIcon.vue'
 import useRouteInfo from '/@/lib/routeInfo'
 import { RouteLocationNamedRaw } from 'vue-router'
 

src/components/Layout/ContentHeader.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { RouteLocationNamedRaw } from 'vue-router'
-import Icon from '/@/components/UI/Icon.vue'
+import AIcon from '/@/components/UI/AIcon.vue'
 
 type HeaderText = {
   title: string
@@ -18,7 +18,7 @@ const props = defineProps<Props>()
 <template>
   <div>
     <h1 :class="$style.titleContainer">
-      <icon
+      <a-icon
         :class="$style.icon"
         :name="props.iconName"
         :size="48"
@@ -27,7 +27,7 @@ const props = defineProps<Props>()
         v-for="(headerText, index) in props.headerTexts"
         :key="index"
       >
-        <icon
+        <a-icon
           v-if="index !== 0"
           :class="$style.chevron"
           name="akar-icons:chevron-right"

src/components/Layout/PageHeader.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Icon from '/@/components/UI/Icon.vue'
+import AIcon from '/@/components/UI/AIcon.vue'
 import { storeToRefs } from 'pinia'
 import { useResponsiveStore } from '/@/store/responsive'
 import pcLogo from '/@/assets/traPortfolio_dashboard_logo_full.svg'
@@ -23,7 +23,7 @@ const { isMobile } = storeToRefs(useResponsiveStore())
       v-if="isMobile"
       @click="emit('toggle-navigation-bar')"
     >
-      <icon name="mdi:menu" />
+      <a-icon name="mdi:menu" />
     </button>
     <router-link :to="{ name: 'Index' }">
       <img

src/components/NavigationBar/NavigationBar.vue

@@ -3,7 +3,7 @@ import { defineModel } from 'vue'
 import NavigationLinks from './NavigationLinks.vue'
 import { useResponsiveStore } from '/@/store/responsive'
 import NavigationBarFooter from './NavigationBarFooter.vue'
-import Icon from '../UI/Icon.vue'
+import AIcon from '/@/components/UI/AIcon.vue'
 import { storeToRefs } from 'pinia'
 
 const isSidebarOpen = defineModel<boolean>({ required: true })
@@ -18,7 +18,7 @@ const { isMobile } = storeToRefs(useResponsiveStore())
       @click="isSidebarOpen = false"
     >
       <div :class="$style.closeContainer">
-        <icon name="mdi:chevron-left" />
+        <a-icon name="mdi:chevron-left" />
         <p>閉じる</p>
       </div>
     </button>

src/components/NavigationBar/NavigationBarFooter.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Icon from '/@/components/UI/Icon.vue'
+import AIcon from '/@/components/UI/AIcon.vue'
 </script>
 
 <template>
@@ -10,7 +10,7 @@ import Icon from '/@/components/UI/Icon.vue'
       target="_blank"
       rel="noopener noreferrer"
     >
-      <icon
+      <a-icon
         name="mdi:help"
         :class="$style.icon"
       />

src/components/NavigationBar/NavigationLinksItem.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, toRef } from 'vue'
 import { useRoute, RouteLocationNamedRaw } from 'vue-router'
-import Icon from '/@/components/UI/Icon.vue'
+import AIcon from '/@/components/UI/AIcon.vue'
 import useRouteInfo from '/@/lib/routeInfo'
 import { routes } from '/@/router/index'
 
@@ -36,7 +36,7 @@ const isActive = computed(() => {
       :data-is-selected="isActive"
       :aria-current="isActive ? 'page' : null"
     >
-      <icon
+      <a-icon
         :class="$style.icon"
         :name="routeInfo.icon"
         :size="30"

src/components/Projects/ProjectItem.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { Project } from '/@/lib/apis'
-import Icon from '/@/components/UI/Icon.vue'
+import AIcon from '/@/components/UI/AIcon.vue'
 import { getGroupOrProjectDuration } from '/@/lib/date'
 
 interface Props {
@@ -20,7 +20,7 @@ defineProps<Props>()
         {{ project.name }}
       </p>
       <p :class="$style.duration">
-        <icon name="mdi:calendar" />
+        <a-icon name="mdi:calendar" />
         {{ getGroupOrProjectDuration(project.duration) }}
       </p>
     </div>

src/components/Projects/ProjectMember.vue

@@ -2,7 +2,7 @@
 import { User, YearWithSemesterDuration } from '/@/lib/apis'
 import UserIcon from '/@/components/UI/UserIcon.vue'
 import FormProjectDuration from '/@/components/UI/FormProjectDuration.vue'
-import Icon from '/@/components/UI/Icon.vue'
+import AIcon from '/@/components/UI/AIcon.vue'
 import { computed } from 'vue'
 import FieldErrorMessage from '/@/components/UI/FieldErrorMessage.vue'
 import { isValidYearWithSemesterDuration } from '/@/lib/validate'
@@ -39,7 +39,7 @@ const shouldShowDurationError = computed(
           :class="[$style.deleteButton, $style.sp]"
           @click="emit('delete', user.id)"
         >
-          <icon
+          <a-icon
             :size="32"
             name="mdi:delete"
           />
@@ -59,7 +59,7 @@ const shouldShowDurationError = computed(
       :class="[$style.deleteButton, $style.pc]"
       @click="emit('delete', user.id)"
     >
-      <icon
+      <a-icon
         :size="32"
         name="mdi:delete"
       />

src/components/UI/BaseButton.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Icon from '/@/components/UI/Icon.vue'
+import AIcon from '/@/components/UI/AIcon.vue'
 
 type ButtonType = 'primary' | 'secondary' | 'warning'
 
@@ -22,7 +22,7 @@ const props = withDefaults(defineProps<Props>(), {
     :data-button-type="props.type"
     :disabled="props.isDisabled"
   >
-    <icon
+    <a-icon
       v-if="props.icon"
       :name="props.icon"
     />

src/components/UI/BaseSelect.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup generic="T">
 import vSelect from 'vue-select'
 import 'vue-select/dist/vue-select.css'
-import Icon from '/@/components/UI/Icon.vue'
+import AIcon from '/@/components/UI/AIcon.vue'
 
 export interface Option<T> {
   label: string
@@ -54,7 +54,7 @@ const compare = (a: T, b: T) => {
   >
     <template #option="{ label }">
       <div :class="$style.item">
-        <icon
+        <a-icon
           v-if="label === options.find(o => compare(o.value, model))?.label"
           name="mdi:tick-circle-outline"
           :class="$style.icon"

src/components/UI/ExternalLink.vue

@@ -1,6 +1,6 @@
 <template>
   <a :class="$style.container">
-    <icon
+    <a-icon
       name="mdi:open-in-new"
       :class="$style.icon"
     />
@@ -10,12 +10,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import Icon from '/@/components/UI/Icon.vue'
+import AIcon from '/@/components/UI/AIcon.vue'
 
 export default defineComponent({
   name: 'LinkWithIcon',
   components: {
-    Icon
+    AIcon
   }
 })
 </script>

src/components/UI/FormInput.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import Icon from '/@/components/UI/Icon.vue'
+import AIcon from '/@/components/UI/AIcon.vue'
 import { isValidUrl } from '/@/lib/validate'
 
 interface Props {
@@ -40,7 +40,7 @@ const handleInput = (event: Event) => {
       v-if="props.icon !== undefined"
       :class="$style.iconContainer"
     >
-      <icon :name="`mdi:${props.icon}`" />
+      <a-icon :name="`mdi:${props.icon}`" />
     </div>
     <input
       :class="$style.input"
@@ -66,7 +66,7 @@ const handleInput = (event: Event) => {
         rel="noopener noreferrer"
         :tabindex="isValidLink ? 0 : -1"
       >
-        <icon name="mdi:open-in-new" />
+        <a-icon name="mdi:open-in-new" />
       </a>
     </div>
   </div>