Merge pull request #42 from traPtitech/refactor/convert_to_script_setup

script setupへの変換

src/App.vue

@@ -1,3 +1,9 @@
+<script lang="ts" setup>
+import PageHeader from '/@/components/Layout/PageHeader.vue'
+import LoadingPage from '/@/pages/LoadingPage.vue'
+import PageFooter from '/@/components/Layout/PageFooter.vue'
+</script>
+
 <template>
   <page-header />
   <Suspense>
@@ -11,22 +17,6 @@
   <page-footer />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-import PageHeader from '/@/components/Layout/PageHeader.vue'
-import LoadingPage from '/@/pages/LoadingPage.vue'
-import PageFooter from '/@/components/Layout/PageFooter.vue'
-
-export default defineComponent({
-  name: 'App',
-  components: {
-    PageHeader,
-    LoadingPage,
-    PageFooter
-  }
-})
-</script>
-
 <style lang="scss" module>
 .main {
   flex: 1;

src/components/Contest/ContestTeamListItem.vue

@@ -1,3 +1,17 @@
+<script lang="ts" setup>
+import { ContestTeam } from '/@/lib/apis'
+
+withDefaults(
+  defineProps<{
+    contestTeam: ContestTeam
+    contestId?: string
+  }>(),
+  {
+    contestId: ''
+  }
+)
+</script>
+
 <template>
   <div>
     <router-link
@@ -12,26 +26,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue'
-import { ContestTeam } from '/@/lib/apis'
-
-export default defineComponent({
-  name: 'ContestTeamListItem',
-  props: {
-    contestTeam: {
-      type: Object as PropType<ContestTeam>,
-      required: true
-    },
-    contestId: {
-      type: String,
-      require: true,
-      default: ''
-    }
-  }
-})
-</script>
-
 <style lang="scss" module>
 .link {
   text-decoration: none;

src/components/ContestTeam/MemberListItem.vue

@@ -1,3 +1,17 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { User } from '/@/lib/apis'
+
+defineProps<{
+  member: User
+}>()
+
+const iconSrc = computed(
+  () =>
+    `https://q.trap.jp/api/v3/public/icon/${/*props.member.name*/ 'sappi_red'}`
+)
+</script>
+
 <template>
   <div>
     <router-link :class="$style.link" :to="`/users/${member.id}`">
@@ -12,30 +26,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, computed } from 'vue'
-import { User } from '/@/lib/apis'
-
-export default defineComponent({
-  name: 'MemberListItem',
-  props: {
-    member: {
-      type: Object as PropType<User>,
-      required: true
-    }
-  },
-  setup() {
-    const iconSrc = computed(
-      () =>
-        `https://q.trap.jp/api/v3/public/icon/${
-          /*props.member.name*/ 'sappi_red'
-        }`
-    )
-    return { iconSrc }
-  }
-})
-</script>
-
 <style lang="scss" module>
 .link {
   display: flex;

src/components/Contests/ContestListItem.vue

@@ -1,3 +1,17 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { Contest } from '/@/lib/apis'
+import { getFullDayString } from '/@/lib/date'
+
+const props = defineProps<{
+  contest: Contest
+}>()
+
+const date = computed(() =>
+  getFullDayString(new Date(props.contest.duration.since))
+)
+</script>
+
 <template>
   <div>
     <router-link :class="$style.link" :to="`/contests/${contest.id}`">
@@ -7,28 +21,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
-import { Contest } from '/@/lib/apis'
-import { getFullDayString } from '/@/lib/date'
-
-export default defineComponent({
-  name: 'ContestListItem',
-  props: {
-    contest: {
-      type: Object as PropType<Contest>,
-      required: true
-    }
-  },
-  setup(props) {
-    const date = computed(() =>
-      getFullDayString(new Date(props.contest.duration.since))
-    )
-    return { date }
-  }
-})
-</script>
-
 <style lang="scss" module>
 .link {
   text-decoration: none;

src/components/Event/HostnameListItem.vue

@@ -1,3 +1,19 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { User } from '/@/lib/apis'
+
+defineProps<{
+  hostname: User
+}>()
+
+const iconSrc = computed(
+  () =>
+    `https://q.trap.jp/api/v3/public/icon/${
+      /*props.hostname.name*/ 'sappi_red'
+    }`
+)
+</script>
+
 <template>
   <div>
     <router-link :class="$style.link" :to="`/users/${hostname.id}`">
@@ -12,30 +28,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, computed } from 'vue'
-import { User } from '/@/lib/apis'
-
-export default defineComponent({
-  name: 'HostnameListItem',
-  props: {
-    hostname: {
-      type: Object as PropType<User>,
-      required: true
-    }
-  },
-  setup() {
-    const iconSrc = computed(
-      () =>
-        `https://q.trap.jp/api/v3/public/icon/${
-          /*props.hostname.name*/ 'sappi_red'
-        }`
-    )
-    return { iconSrc }
-  }
-})
-</script>
-
 <style lang="scss" module>
 .link {
   display: flex;

src/components/Events/EventListItem.vue

@@ -1,3 +1,17 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { Event } from '/@/lib/apis'
+import { getFullDayString } from '/@/lib/date'
+
+const props = defineProps<{
+  event: Event
+}>()
+
+const date = computed(() =>
+  getFullDayString(new Date(props.event.duration.since))
+)
+</script>
+
 <template>
   <div>
     <router-link :class="$style.link" :to="`/events/${event.id}`">
@@ -7,28 +21,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
-import { Event } from '/@/lib/apis'
-import { getFullDayString } from '/@/lib/date'
-
-export default defineComponent({
-  name: 'EventListItem',
-  props: {
-    event: {
-      type: Object as PropType<Event>,
-      required: true
-    }
-  },
-  setup(props) {
-    const date = computed(() =>
-      getFullDayString(new Date(props.event.duration.since))
-    )
-    return { date }
-  }
-})
-</script>
-
 <style lang="scss" module>
 .link {
   text-decoration: none;

src/components/Group/MemberListItem.vue

@@ -1,3 +1,17 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { GroupMember } from '/@/lib/apis'
+
+defineProps<{
+  member: GroupMember
+}>()
+
+const iconSrc = computed(
+  () =>
+    `https://q.trap.jp/api/v3/public/icon/${/*props.member.name*/ 'sappi_red'}`
+)
+</script>
+
 <template>
   <div>
     <router-link :class="$style.link" :to="`/users/${member.id}`">
@@ -10,30 +24,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, computed } from 'vue'
-import { GroupMember } from '/@/lib/apis'
-
-export default defineComponent({
-  name: 'MemberListItem',
-  props: {
-    member: {
-      type: Object as PropType<GroupMember>,
-      required: true
-    }
-  },
-  setup() {
-    const iconSrc = computed(
-      () =>
-        `https://q.trap.jp/api/v3/public/icon/${
-          /*props.member.name*/ 'sappi_red'
-        }`
-    )
-    return { iconSrc }
-  }
-})
-</script>
-
 <style lang="scss" module>
 .link {
   display: flex;

src/components/Groups/GroupListItem.vue

@@ -1,3 +1,11 @@
+<script lang="ts" setup>
+import { Group } from '/@/lib/apis'
+
+defineProps<{
+  group: Group
+}>()
+</script>
+
 <template>
   <div>
     <router-link :class="$style.link" :to="`/groups/${group.id}`">
@@ -6,21 +14,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue'
-import { Group } from '/@/lib/apis'
-
-export default defineComponent({
-  name: 'GroupListItem',
-  props: {
-    group: {
-      type: Object as PropType<Group>,
-      required: true
-    }
-  }
-})
-</script>
-
 <style lang="scss" module>
 .link {
   text-decoration: none;

src/components/Layout/PageContainer.vue

@@ -2,14 +2,6 @@
   <main :class="$style.container"><slot /></main>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'PageContainer'
-})
-</script>
-
 <style lang="scss" module>
 .container {
   width: 100%;

src/components/Layout/PageFooter.vue

@@ -5,14 +5,6 @@
   </footer>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'PageFooter'
-})
-</script>
-
 <style lang="scss" module>
 .container {
   padding: 1.5rem 3rem;

src/components/Layout/PageTitle.vue

@@ -2,14 +2,6 @@
   <h1 :class="$style.title"><slot /></h1>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'PageTitle'
-})
-</script>
-
 <style lang="scss" module>
 .title {
   color: $color-primary;