composition API移行

src/components/dashboard/DashboardItem.vue

@@ -1,9 +1,7 @@
-<template functional>
+<template>
   <div class="mb-5">
     <slot />
   </div>
 </template>
 
-<script>
-export default { name: 'DashboardItem' }
-</script>
+<script setup lang="ts"></script>

src/components/dashboard/DashboardItemTitle.vue

@@ -1,9 +1,7 @@
-<template functional>
+<template>
   <h2 class="font-weight-regular">
     <slot />
   </h2>
 </template>
 
-<script>
-export default { name: 'DashboardItemTitle' }
-</script>
+<script setup lang="ts"></script>

src/components/dashboard/RoomList.vue

@@ -13,35 +13,25 @@
   </v-row>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { Component } from 'vue-property-decorator'
+<script setup lang="ts">
+import { ref } from 'vue'
 import RoomListItem from '@/components/dashboard/RoomListItem.vue'
 import { today, todayEnd } from '@/workers/date'
 import api, { ResponseRoom } from '@/api'
 
-@Component({
-  components: {
-    RoomListItem,
-  },
-})
-export default class RoomList extends Vue {
-  status: 'loading' | 'loaded' | 'error' = 'loading'
-  rooms: ResponseRoom[] = []
-
-  async created() {
-    this.status = 'loading'
-    try {
-      this.rooms = (
-        await api.rooms.getRooms({
-          dateBegin: today(),
-          dateEnd: todayEnd(),
-        })
-      ).filter(room => room.verified)
-      this.status = 'loaded'
-    } catch (__) {
-      this.status = 'error'
-    }
+const status = ref<'loading' | 'loaded' | 'error'>('loading')
+const rooms = ref<ResponseRoom[]>([])
+;(async () => {
+  try {
+    ;(
+      await api.rooms.getRooms({
+        dateBegin: today(),
+        dateEnd: todayEnd(),
+      })
+    ).filter(room => room.verified)
+    status.value = 'loaded'
+  } catch (__) {
+    status.value = 'error'
   }
-}
+})()
 </script>

src/components/dashboard/RoomListItem.vue

@@ -11,19 +11,13 @@
   </v-card>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { Component, Prop } from 'vue-property-decorator'
-import { formatDate, TIME_DISPLAY_FORMAT } from '@/workers/date'
+<script setup lang="ts">
+import { formatDate as _formatDate, TIME_DISPLAY_FORMAT } from '@/workers/date'
 import { ResponseRoom } from '@/api'
 
-@Component
-export default class AssignedRoomDisplay extends Vue {
-  @Prop({ type: Object, required: true })
-  room!: ResponseRoom
+defineProps<{
+  room: ResponseRoom
+}>()
 
-  get formatDate() {
-    return formatDate(TIME_DISPLAY_FORMAT)
-  }
-}
+const formatDate = _formatDate(TIME_DISPLAY_FORMAT)
 </script>

src/components/dashboard/YourEvents.vue

@@ -52,45 +52,39 @@
   </v-card>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { Component } from 'vue-property-decorator'
-import { formatDate, today } from '@/workers/date'
+<script setup lang="ts">
+import { formatDate as _formatDate, today } from '@/workers/date'
 import api, { ResponseEvent, GetMyEventsRelationEnum } from '@/api'
+import { ref } from 'vue'
+import { useStore } from '@/workers/store'
 
 const uniqueBy = <T, S>(f: (x: T) => S, arr: T[]): T[] => {
   return [...new Map(arr.map(x => [f(x), x])).values()]
 }
+const store = useStore()
 
-@Component
-export default class YourEvents extends Vue {
-  status: 'loading' | 'loaded' | 'error' = 'loading'
-  events: ResponseEvent[] = []
+const status = ref<'loading' | 'loaded' | 'error'>('loading')
+const events = ref<ResponseEvent[]>([])
 
-  async created() {
-    this.status = 'loading'
-    try {
-      const [adminEvents, belongingEvents] = await Promise.all([
-        api.events.getMyEvents({ relation: GetMyEventsRelationEnum.Admins }),
-        api.events.getMyEvents({ relation: GetMyEventsRelationEnum.Belongs }),
-      ])
-      this.events = uniqueBy(
-        event => event.eventId,
-        [...adminEvents, ...belongingEvents]
-      ).filter(event => today() <= event.timeStart)
-      this.status = 'loaded'
-    } catch (__) {
-      this.status = 'error'
-    }
+;(async () => {
+  status.value = 'loading'
+  try {
+    const [adminEvents, belongingEvents] = await Promise.all([
+      api.events.getMyEvents({ relation: GetMyEventsRelationEnum.Admins }),
+      api.events.getMyEvents({ relation: GetMyEventsRelationEnum.Belongs }),
+    ])
+    events.value = uniqueBy(
+      event => event.eventId,
+      [...adminEvents, ...belongingEvents]
+    ).filter(event => today() <= event.timeStart)
+    status.value = 'loaded'
+  } catch (__) {
+    status.value = 'error'
   }
+})()
 
-  get includesMe() {
-    return (memberIds: string[]) =>
-      memberIds.includes(this.$store.direct.state.me?.userId ?? '')
-  }
+const includesMe = (memberIds: string[]) =>
+  memberIds.includes(store.direct.state.me?.userId ?? '')
 
-  get formatDate() {
-    return formatDate('MM/DD')
-  }
-}
+const formatDate = _formatDate('MM/DD')
 </script>

src/components/dashboard/YourGroups.vue

@@ -49,35 +49,32 @@
   </v-card>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { Component } from 'vue-property-decorator'
+<script setup lang="ts">
+import { ref } from 'vue'
 import api, { ResponseGroup } from '@/api'
+import { useStore } from '@/workers/store'
 
-@Component
-export default class YourGroups extends Vue {
-  status: 'loading' | 'loaded' | 'error' = 'loading'
-  groups: ResponseGroup[] = []
+const store = useStore()
 
-  async created() {
-    this.status = 'loading'
-    try {
-      await this.fetchGroups()
-      this.status = 'loaded'
-    } catch (__) {
-      this.status = 'error'
-    }
-  }
+const status = ref<'loading' | 'loaded' | 'error'>('loading')
+const groups = ref<ResponseGroup[]>([])
 
-  async fetchGroups() {
-    this.groups = (await api.groups.getGroups()).filter(group =>
-      this.includesMe([...group.members, ...group.admins])
-    )
-  }
+const fetchGroups = async () => {
+  groups.value = (await api.groups.getGroups()).filter(group =>
+    includesMe([...group.members, ...group.admins])
+  )
+}
 
-  get includesMe() {
-    return (memberIds: string[]) =>
-      memberIds.includes(this.$store.direct.state.me?.userId ?? '')
+const includesMe = (memberIds: string[]) =>
+  memberIds.includes(store.direct.state.me?.userId ?? '')
+
+;(async () => {
+  status.value = 'loading'
+  try {
+    await fetchGroups()
+    status.value = 'loaded'
+  } catch (__) {
+    status.value = 'error'
   }
-}
+})()
 </script>

src/components/event/AttendanceForm.vue

@@ -23,40 +23,40 @@
           >
             出席する
           </v-btn>
-          <attendance-selector v-else v-model="attendance" />
+          <attendance-selector
+            v-else
+            :attendance="attendance"
+            @change="v => emits('change', v)"
+          />
         </v-col>
       </v-row>
     </v-card-actions>
   </v-sheet>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { Component, ModelSync } from 'vue-property-decorator'
+<script setup lang="ts">
+import { computed } from 'vue'
 import AttendanceSelector from '@/components/event/AttendanceSelector.vue'
 import UserAvatar from '@/components/shared/UserAvatar.vue'
-import { RequestScheduleScheduleEnum, ResponseUser } from '@/api'
+import { RequestScheduleScheduleEnum } from '@/api'
+import { useStore } from '@/workers/store'
 
-@Component({
-  components: {
-    AttendanceSelector,
-    UserAvatar,
-  },
-})
-export default class AttendanceForm extends Vue {
-  @ModelSync('value', 'change', { required: true })
-  attendance!: RequestScheduleScheduleEnum | null
+const store = useStore()
 
-  get shouldPostAttendance(): boolean {
-    return this.attendance === RequestScheduleScheduleEnum.Pending
-  }
+const props = defineProps<{
+  attendance: RequestScheduleScheduleEnum | null
+}>()
+const emits = defineEmits<{
+  (e: 'change', value: RequestScheduleScheduleEnum): void
+}>()
 
-  setAttend(): void {
-    this.attendance = RequestScheduleScheduleEnum.Attendance
-  }
+const shouldPostAttendance = computed(
+  () => props.attendance === RequestScheduleScheduleEnum.Pending
+)
 
-  get me(): ResponseUser {
-    return this.$store.direct.state.me!
-  }
+const setAttend = () => {
+  emits('change', RequestScheduleScheduleEnum.Attendance)
 }
+
+const me = store.direct.state.me!
 </script>

src/components/event/AttendanceSelector.vue

@@ -2,7 +2,6 @@
   <v-select
     v-model="attendance"
     :items="items"
-    :value="attendance"
     solo
     flat
     :background-color="backgroundOf(attendance)"
@@ -21,47 +20,52 @@
   </v-select>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { RequestScheduleScheduleEnum } from '@/api'
-import Vue from 'vue'
-import { Component, ModelSync } from 'vue-property-decorator'
+import { computed } from 'vue'
 
-@Component
-export default class AttendanceSelector extends Vue {
-  @ModelSync('value', 'update', { type: String, required: true })
-  attendance!: RequestScheduleScheduleEnum
+const props = defineProps<{
+  attendance: RequestScheduleScheduleEnum
+}>()
+const emits = defineEmits<{
+  (e: 'change', value: string)
+}>()
 
-  items: { text: string; value: RequestScheduleScheduleEnum }[] = [
-    {
-      text: '未定',
-      value: RequestScheduleScheduleEnum.Pending,
-    },
-    {
-      text: '欠席予定',
-      value: RequestScheduleScheduleEnum.Absent,
-    },
-    {
-      text: '出席予定',
-      value: RequestScheduleScheduleEnum.Attendance,
-    },
-  ]
+const attendance = computed({
+  get: () => props.attendance,
+  set: (v: string) => {
+    emits('change', v)
+  },
+})
 
-  foregroundOf(attendance: RequestScheduleScheduleEnum): string {
-    return {
-      [RequestScheduleScheduleEnum.Pending]: 'blue-grey--text text--darken-1',
-      [RequestScheduleScheduleEnum.Absent]: 'white--text',
-      [RequestScheduleScheduleEnum.Attendance]: 'white--text',
-    }[attendance]
-  }
+const items: { text: string; value: RequestScheduleScheduleEnum }[] = [
+  {
+    text: '未定',
+    value: RequestScheduleScheduleEnum.Pending,
+  },
+  {
+    text: '欠席予定',
+    value: RequestScheduleScheduleEnum.Absent,
+  },
+  {
+    text: '出席予定',
+    value: RequestScheduleScheduleEnum.Attendance,
+  },
+]
 
-  backgroundOf(attendance: RequestScheduleScheduleEnum): string {
-    return {
-      [RequestScheduleScheduleEnum.Pending]: '#ced6d7',
-      [RequestScheduleScheduleEnum.Absent]: '#d3664f',
-      [RequestScheduleScheduleEnum.Attendance]: 'primary',
-    }[attendance]
-  }
-}
+const foregroundOf = (attendance: RequestScheduleScheduleEnum) =>
+  ({
+    [RequestScheduleScheduleEnum.Pending]: 'blue-grey--text text--darken-1',
+    [RequestScheduleScheduleEnum.Absent]: 'white--text',
+    [RequestScheduleScheduleEnum.Attendance]: 'white--text',
+  }[attendance])
+
+const backgroundOf = (attendance: RequestScheduleScheduleEnum) =>
+  ({
+    [RequestScheduleScheduleEnum.Pending]: '#ced6d7',
+    [RequestScheduleScheduleEnum.Absent]: '#d3664f',
+    [RequestScheduleScheduleEnum.Attendance]: 'primary',
+  }[attendance])
 </script>
 
 <style lang="scss">