Merge pull request #3140 from traPtitech/refactor/composables

<script setup>への移行

.eslintrc.js

@@ -32,6 +32,7 @@ module.exports = {
     '@typescript-eslint/no-unused-vars': 'off',
     'unused-imports/no-unused-imports': 'warn',
     'unused-imports/no-unused-vars': 'off',
+    'vue/require-default-prop': 'off',
     'vue/no-v-html': 'off',
     'vue/block-lang': [
       'error',
@@ -40,7 +41,7 @@ module.exports = {
         style: { lang: 'scss' }
       }
     ],
-    'vue/component-api-style': ['error', ['composition']],
+    'vue/component-api-style': ['error', ['script-setup']],
     'vue/component-name-in-template-casing': ['error', 'kebab-case'],
     'vue/custom-event-name-casing': ['error', 'camelCase'],
     'vue/v-on-event-hyphenation': ['error', 'always', { autofix: true }],

src/App.vue

@@ -11,17 +11,15 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, watchEffect, Ref } from 'vue'
-import useHtmlDatasetBoolean from '/@/use/htmlDatasetBoolean'
-import ToastContainer from '/@/components/Toast/ToastContainer.vue'
-import ModalContainer from '/@/components/Modal/ModalContainer.vue'
-import { useThemeVariables } from '/@/use/theme'
+import { computed, watchEffect, Ref } from 'vue'
+import useHtmlDatasetBoolean from '/@/composables/useHtmlDatasetBoolean'
+import { useThemeVariables } from '/@/composables/useTheme'
 import { useResponsiveStore } from '/@/store/ui/responsive'
 import { useBrowserSettings } from '/@/store/app/browserSettings'
 import { useAppRtcStore } from '/@/store/app/rtc'
 import { useTts } from '/@/store/app/tts'
 import { useThemeSettings } from '/@/store/app/themeSettings'
-import useDocumentTitle from '/@/use/documentTitle'
+import useDocumentTitle from '/@/composables/useDocumentTitle'
 
 const useQallConfirmer = () => {
   const { isCurrentDevice } = useAppRtcStore()
@@ -81,30 +79,24 @@ ${Object.entries(style.value)
     themeStyleTag.textContent = styleText.value
   })
 }
+</script>
 
-export default defineComponent({
-  name: 'App',
-  components: {
-    ModalContainer,
-    ToastContainer
-  },
-  setup() {
-    useTts()
+<script lang="ts" setup>
+import ToastContainer from '/@/components/Toast/ToastContainer.vue'
+import ModalContainer from '/@/components/Modal/ModalContainer.vue'
 
-    const { isMobile } = useResponsiveStore()
+useTts()
 
-    useDocumentTitle()
-    useQallConfirmer()
+const { isMobile } = useResponsiveStore()
 
-    useThemeObserver()
-    useEcoModeObserver()
+useDocumentTitle()
+useQallConfirmer()
 
-    const themeVariables = useThemeVariables()
-    useThemeStyleTag(themeVariables)
+useThemeObserver()
+useEcoModeObserver()
 
-    return { isMobile }
-  }
-})
+const themeVariables = useThemeVariables()
+useThemeStyleTag(themeVariables)
 </script>
 
 <style lang="scss" module>

src/components/Authenticate/AuthenticateButton.vue

@@ -15,47 +15,27 @@
   </button>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
 import AIcon from '/@/components/UI/AIcon.vue'
 
 type Type = 'primary' | 'secondary'
 
-export default defineComponent({
-  name: 'AuthenticateButton',
-  components: {
-    AIcon
-  },
-  props: {
-    type: {
-      type: String as PropType<Type>,
-      required: true
-    },
-    label: {
-      type: String,
-      default: ''
-    },
-    iconName: {
-      type: String,
-      default: undefined
-    },
-    iconMdi: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    isSubmit: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup() {
-    return {}
+withDefaults(
+  defineProps<{
+    type: Type
+    label?: string
+    iconName?: string
+    iconMdi?: boolean
+    disabled?: boolean
+    isSubmit?: boolean
+  }>(),
+  {
+    label: '',
+    iconMdi: false,
+    disabled: false,
+    isSubmit: false
   }
-})
+)
 </script>
 
 <style lang="scss" module>

src/components/Authenticate/AuthenticateHeader.vue

@@ -11,26 +11,13 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-import logoUrl from '/@/assets/traq-logo.svg?url'
+<script lang="ts" setup>
 import LogoText from '/@/assets/traq-logo-text.svg?component'
+import logoUrl from '/@/assets/traq-logo.svg?url'
 
-export default defineComponent({
-  name: 'AuthenticateHeader',
-  components: {
-    LogoText
-  },
-  props: {
-    title: {
-      type: String,
-      default: undefined
-    }
-  },
-  setup() {
-    return { logoUrl }
-  }
-})
+defineProps<{
+  title?: string
+}>()
 </script>
 
 <style lang="scss" module>

src/components/Authenticate/AuthenticateInput.vue

@@ -30,64 +30,41 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue'
-import { randomString } from '/@/lib/basic/randomString'
+<script lang="ts" setup>
 import AIcon from '/@/components/UI/AIcon.vue'
-import useShowPassword from '/@/use/showPassword'
-import useTextModelSyncer from '/@/use/textModelSyncer'
+import { randomString } from '/@/lib/basic/randomString'
+import useShowPassword from '/@/composables/useShowPassword'
+import useTextModelSyncer from '/@/composables/useTextModelSyncer'
 
-export default defineComponent({
-  name: 'AuthenticateInput',
-  components: { AIcon },
-  props: {
-    modelValue: {
-      type: String,
-      default: ''
-    },
-    label: {
-      type: String,
-      default: ''
-    },
-    type: {
-      type: String as PropType<'text' | 'password'>,
-      default: 'text' as const
-    },
-    autocomplete: {
-      type: String,
-      default: undefined
-    },
-    autofocus: {
-      type: Boolean,
-      default: false
-    },
-    autocapitalize: {
-      type: String,
-      default: 'off'
-    },
-    enterkeyhint: {
-      type: String,
-      default: undefined
-    }
-  },
-  setup(props, { emit }) {
-    const { value, onInput } = useTextModelSyncer(props, emit)
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string
+    label?: string
+    type?: 'text' | 'password'
+    autocomplete?: string
+    autofocus?: boolean
+    autocapitalize?: string
+    enterkeyhint?: string
+  }>(),
+  {
+    modelValue: '',
+    label: '',
+    type: 'text' as const,
+    autofocus: false,
+    autocapitalize: 'off'
+  }
+)
 
-    const id = randomString()
+const emits = defineEmits<{
+  (v: 'update:modelValue', val: string): void
+}>()
 
-    const { isPasswordShown, togglePassword, typeWithShown } =
-      useShowPassword(props)
+const { value, onInput } = useTextModelSyncer(props, emits)
 
-    return {
-      value,
-      onInput,
-      id,
-      isPasswordShown,
-      togglePassword,
-      typeWithShown
-    }
-  }
-})
+const id = randomString()
+
+const { isPasswordShown, togglePassword, typeWithShown } =
+  useShowPassword(props)
 </script>
 
 <style lang="scss" module>

src/components/Authenticate/AuthenticateMainView.vue

@@ -15,51 +15,40 @@
   </transition>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
 import AuthenticateModal from './AuthenticateModal.vue'
 import LoginForm from './LoginForm.vue'
 import RegistrationForm from './RegistrationForm.vue'
 import ConsentForm from './ConsentForm/ConsentForm.vue'
+import { computed } from 'vue'
 import { PageType } from '/@/views/AuthPage.vue'
-import useVersion from '/@/use/version'
+import useVersion from '/@/composables/useVersion'
+import { RouteName } from '/@/router'
 
-export default defineComponent({
-  name: 'AuthenticateMainView',
-  components: {
-    AuthenticateModal,
-    LoginForm,
-    RegistrationForm,
-    ConsentForm
-  },
-  props: {
-    type: {
-      type: String as PropType<PageType>,
-      default: 'login' as const
-    },
-    show: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props) {
-    const needVersionFetch = computed(
-      () => props.type === 'login' || props.type === 'registration'
-    )
-    // ログイン画面が表示されるときにlayout shiftが起こらないように取得後に表示する
-    const { externalLogin, signUpAllowed } = useVersion(needVersionFetch)
+const props = withDefaults(
+  defineProps<{
+    type?: PageType
+    show?: boolean
+  }>(),
+  {
+    type: RouteName.Login,
+    show: false
+  }
+)
 
-    const shouldShow = computed(
-      () =>
-        props.show &&
-        ((props.type === 'login' && externalLogin.value) ||
-          (props.type === 'registration' && signUpAllowed.value) ||
-          props.type === 'consent')
-    )
+const needVersionFetch = computed(
+  () => props.type === 'login' || props.type === 'registration'
+)
+// ログイン画面が表示されるときにlayout shiftが起こらないように取得後に表示する
+const { externalLogin, signUpAllowed } = useVersion(needVersionFetch)
 
-    return { shouldShow, externalLogin, signUpAllowed }
-  }
-})
+const shouldShow = computed(
+  () =>
+    props.show &&
+    ((props.type === 'login' && externalLogin.value) ||
+      (props.type === 'registration' && signUpAllowed.value) ||
+      props.type === 'consent')
+)
 </script>
 
 <style lang="scss" module>

src/components/Authenticate/AuthenticateModal.vue

@@ -2,17 +2,6 @@
   <div :class="$style.container"><slot></slot></div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'AuthenticateModal',
-  setup() {
-    return {}
-  }
-})
-</script>
-
 <style lang="scss" module>
 .container {
   @include background-primary;

src/components/Authenticate/AuthenticateSeparator.vue

@@ -8,22 +8,15 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-import {} from '/@/lib/styles'
-
-export default defineComponent({
-  name: 'AuthenticateSeparator',
-  props: {
-    label: {
-      type: String,
-      default: ''
-    }
-  },
-  setup() {
-    return {}
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    label?: string
+  }>(),
+  {
+    label: ''
   }
-})
+)
 </script>
 
 <style lang="scss" module>