diff --git a/.eslintrc.js b/.eslintrc.js
index 795f27ed1..d6f99f161 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -6,7 +6,11 @@ module.exports = {
parserOptions: {
parser: '@typescript-eslint/parser'
},
- extends: ['plugin:vue/essential', '@vue/prettier', '@vue/typescript'],
+ extends: [
+ 'plugin:vue/strongly-recommended',
+ '@vue/prettier',
+ '@vue/typescript'
+ ],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
diff --git a/src/components/Authenticate/AuthenticateButtonPrimary.vue b/src/components/Authenticate/AuthenticateButtonPrimary.vue
index bd3899bf5..b21adbe7a 100644
--- a/src/components/Authenticate/AuthenticateButtonPrimary.vue
+++ b/src/components/Authenticate/AuthenticateButtonPrimary.vue
@@ -4,7 +4,7 @@
:style="styles.container"
@click="context.emit('click')"
>
- {{ props.label }}
+ {{ label }}
@@ -12,10 +12,6 @@
import { defineComponent, SetupContext, reactive } from '@vue/composition-api'
import { makeStyles } from '@/lib/styles'
-type Props = {
- label: string
-}
-
const useStyles = () =>
reactive({
container: makeStyles(theme => ({
@@ -32,9 +28,9 @@ export default defineComponent({
default: ''
}
},
- setup(props: Props, context: SetupContext) {
+ setup(props, context: SetupContext) {
const styles = useStyles()
- return { props, context, styles }
+ return { context, styles }
}
})
diff --git a/src/components/Authenticate/AuthenticateButtonSecondary.vue b/src/components/Authenticate/AuthenticateButtonSecondary.vue
index ff2eebc83..e75a1db9f 100644
--- a/src/components/Authenticate/AuthenticateButtonSecondary.vue
+++ b/src/components/Authenticate/AuthenticateButtonSecondary.vue
@@ -5,12 +5,12 @@
@click="context.emit('click')"
>
- {{ props.label }}
+ {{ label }}
@@ -19,12 +19,6 @@ import { defineComponent, SetupContext, reactive } from '@vue/composition-api'
import { makeStyles } from '@/lib/styles'
import Icon from '@/components/UI/Icon.vue'
-type Props = {
- label: string
- iconName?: string
- iconMdi: boolean
-}
-
const useStyles = () =>
reactive({
container: makeStyles(theme => ({
@@ -43,9 +37,9 @@ export default defineComponent({
iconName: String,
iconMdi: { type: Boolean, default: false }
},
- setup(props: Props, context: SetupContext) {
+ setup(props, context: SetupContext) {
const styles = useStyles()
- return { props, context, styles }
+ return { context, styles }
}
})
diff --git a/src/components/Authenticate/AuthenticateHeader.vue b/src/components/Authenticate/AuthenticateHeader.vue
index 58b3f43b6..a4ed56158 100644
--- a/src/components/Authenticate/AuthenticateHeader.vue
+++ b/src/components/Authenticate/AuthenticateHeader.vue
@@ -1,8 +1,8 @@
-
+
- {{ props.title }}
+ {{ title }}
@@ -13,10 +13,6 @@ import { defineComponent, SetupContext, reactive } from '@vue/composition-api'
import useInput from '@/use/input'
import { makeStyles } from '@/lib/styles'
-type Props = {
- title?: string
-}
-
const useStyles = () =>
reactive({
container: makeStyles(theme => ({
@@ -35,9 +31,9 @@ export default defineComponent({
props: {
title: String
},
- setup(props: Props, context: SetupContext) {
+ setup(props, context: SetupContext) {
const styles = useStyles()
- return { props, styles }
+ return { styles }
}
})
diff --git a/src/components/Authenticate/AuthenticateInput.vue b/src/components/Authenticate/AuthenticateInput.vue
index 2b15bc411..139c47dcd 100644
--- a/src/components/Authenticate/AuthenticateInput.vue
+++ b/src/components/Authenticate/AuthenticateInput.vue
@@ -1,31 +1,30 @@
diff --git a/src/components/Authenticate/AuthenticateMainView.vue b/src/components/Authenticate/AuthenticateMainView.vue
index 395ee21b2..a0deb5bc3 100644
--- a/src/components/Authenticate/AuthenticateMainView.vue
+++ b/src/components/Authenticate/AuthenticateMainView.vue
@@ -1,14 +1,14 @@
diff --git a/src/components/Authenticate/AuthenticateSeparator.vue b/src/components/Authenticate/AuthenticateSeparator.vue
index 4abffb923..546801bee 100644
--- a/src/components/Authenticate/AuthenticateSeparator.vue
+++ b/src/components/Authenticate/AuthenticateSeparator.vue
@@ -2,7 +2,7 @@
- {{ props.label }}
+ {{ label }}
@@ -12,10 +12,6 @@
import { defineComponent, reactive } from '@vue/composition-api'
import { makeStyles } from '@/lib/styles'
-type Props = {
- label: string
-}
-
const useStyles = () =>
reactive({
hr: makeStyles(theme => ({
@@ -34,9 +30,9 @@ export default defineComponent({
default: ''
}
},
- setup(props: Props) {
+ setup() {
const styles = useStyles()
- return { props, styles }
+ return { styles }
}
})
diff --git a/src/components/Authenticate/use/login.ts b/src/components/Authenticate/use/login.ts
index 04dd8339d..ef02219c1 100644
--- a/src/components/Authenticate/use/login.ts
+++ b/src/components/Authenticate/use/login.ts
@@ -1,4 +1,4 @@
-import { defineComponent, reactive, computed } from '@vue/composition-api'
+import { reactive } from '@vue/composition-api'
import api from '@/lib/api'
const useLogin = () => {
diff --git a/src/components/Main/MainView/MainViewComponentSelector.vue b/src/components/Main/MainView/MainViewComponentSelector.vue
index 3663004a6..0392b5f76 100644
--- a/src/components/Main/MainView/MainViewComponentSelector.vue
+++ b/src/components/Main/MainView/MainViewComponentSelector.vue
@@ -1,38 +1,39 @@
diff --git a/src/components/Main/MainView/MainViewHeader/MainViewHeaderTools.vue b/src/components/Main/MainView/MainViewHeader/MainViewHeaderTools.vue
index f6bde5480..142505bde 100644
--- a/src/components/Main/MainView/MainViewHeader/MainViewHeaderTools.vue
+++ b/src/components/Main/MainView/MainViewHeader/MainViewHeaderTools.vue
@@ -20,13 +20,13 @@
/>
reactive({
container: makeStyles(theme => ({
@@ -72,8 +68,8 @@ export default defineComponent({
Icon
},
props: { isStared: { type: Boolean, default: false } },
- setup(props: Props, context: SetupContext) {
- return { props, context }
+ setup(_, context: SetupContext) {
+ return { context }
}
})
diff --git a/src/components/Main/MainView/MessageElement/GradeBadge.vue b/src/components/Main/MainView/MessageElement/GradeBadge.vue
index 830556a27..939c3ac1c 100644
--- a/src/components/Main/MainView/MessageElement/GradeBadge.vue
+++ b/src/components/Main/MainView/MessageElement/GradeBadge.vue
@@ -1,27 +1,27 @@
- Bot
+ Bot
{{ state.grade }}
Admin
diff --git a/src/components/Main/MainView/MessageElement/MessageElement.vue b/src/components/Main/MainView/MessageElement/MessageElement.vue
index 5bb262458..2d997131c 100644
--- a/src/components/Main/MainView/MessageElement/MessageElement.vue
+++ b/src/components/Main/MainView/MessageElement/MessageElement.vue
@@ -2,21 +2,21 @@
@@ -31,27 +31,25 @@ import {
onMounted,
watchEffect,
watch,
- SetupContext
+ SetupContext,
+ PropType
} from '@vue/composition-api'
import store from '@/store'
import UserIcon from '@/components/UI/UserIcon.vue'
import MessageHeader from './MessageHeader.vue'
import MessageFileList from './MessageFileList.vue'
-
-interface Props {
- messageId: string
-}
+import { MessageId } from '@/types/entity-ids'
export default defineComponent({
name: 'MessageElement',
components: { UserIcon, MessageHeader, MessageFileList },
props: {
messageId: {
- type: String,
+ type: String as PropType,
required: true
}
},
- setup(props: Props, context: SetupContext) {
+ setup(props, context: SetupContext) {
const bodyRef = ref(null)
const state = reactive({
message: computed(() => store.state.entities.messages[props.messageId]),
diff --git a/src/components/Main/MainView/MessageElement/MessageFileList.vue b/src/components/Main/MainView/MessageElement/MessageFileList.vue
index 289e03624..edba43574 100644
--- a/src/components/Main/MainView/MessageElement/MessageFileList.vue
+++ b/src/components/Main/MainView/MessageElement/MessageFileList.vue
@@ -4,7 +4,7 @@
@@ -12,13 +12,13 @@
@@ -32,10 +32,6 @@ import MessageFileListFile from './MessageFileListFile.vue'
import MessageFileListImage from './MessageFileListImage.vue'
import MessageFileListVideo from './MessageFileListVideo.vue'
-interface Props {
- fileIds: FileId[]
-}
-
export default defineComponent({
name: 'MessageFileList',
components: {
@@ -49,7 +45,7 @@ export default defineComponent({
default: []
}
},
- setup(props: Props) {
+ setup(props) {
const { fileMetaDataState } = useFileMetaList(props)
const showLargeImage = computed(() => fileMetaDataState.images.length === 1)
return { fileMetaDataState, mimeToFileType, showLargeImage }
diff --git a/src/components/Main/MainView/MessageElement/MessageFileListFile.vue b/src/components/Main/MainView/MessageElement/MessageFileListFile.vue
index a545d4a1d..820cd86b1 100644
--- a/src/components/Main/MainView/MessageElement/MessageFileListFile.vue
+++ b/src/components/Main/MainView/MessageElement/MessageFileListFile.vue
@@ -1,17 +1,11 @@
-
+
diff --git a/src/components/Main/MainView/MessageElement/MessageFileListVideo.vue b/src/components/Main/MainView/MessageElement/MessageFileListVideo.vue
index 912420f16..8bf3d20df 100644
--- a/src/components/Main/MainView/MessageElement/MessageFileListVideo.vue
+++ b/src/components/Main/MainView/MessageElement/MessageFileListVideo.vue
@@ -1,14 +1,9 @@
@@ -49,7 +44,7 @@ export default defineComponent({
setup(props, context) {
const styles = useStyles()
const { fileMeta, fileLink, fileRawPath } = useFileMeta(props, context)
- return { styles, fileLink, fileRawPath }
+ return { styles, fileMeta, fileLink, fileRawPath }
}
})
diff --git a/src/components/Main/MainView/MessageElement/MessageHeader.vue b/src/components/Main/MainView/MessageElement/MessageHeader.vue
index 6b42df546..18a23ebcb 100644
--- a/src/components/Main/MainView/MessageElement/MessageHeader.vue
+++ b/src/components/Main/MainView/MessageElement/MessageHeader.vue
@@ -3,32 +3,31 @@
{{ state.user.displayName }}
{{ state.date }}
diff --git a/src/components/Main/MainView/MessageInput/MessageInput.vue b/src/components/Main/MainView/MessageInput/MessageInput.vue
index 4e464f4e6..5d9dc5880 100644
--- a/src/components/Main/MainView/MessageInput/MessageInput.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInput.vue
@@ -29,7 +29,7 @@
diff --git a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
index c71b0ba4c..75198c593 100644
--- a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
@@ -3,7 +3,7 @@
ref="textareaRef"
:class="$style.container"
:style="styles.container"
- :value="props.text"
+ :value="text"
placeholder="メッセージを送信"
@input="onInput"
@keydown="onKeyDown"
@@ -42,11 +42,6 @@ const useEnterWatcher = (context: SetupContext) => {
return { onKeyDown }
}
-type Props = {
- text: string
- shouldUpdateTextAreaSize: boolean
-}
-
export default defineComponent({
name: 'MessageInputTextArea',
props: {
@@ -59,7 +54,7 @@ export default defineComponent({
default: false
}
},
- setup(props: Props, context: SetupContext) {
+ setup(props, context: SetupContext) {
const styles = useStyles()
const { onInput } = useInput(context)
const { onKeyDown } = useEnterWatcher(context)
@@ -78,7 +73,6 @@ export default defineComponent({
}
})
return {
- props,
styles,
onInput,
onKeyDown,
diff --git a/src/components/Main/MainView/MessagesScroller.vue b/src/components/Main/MainView/MessagesScroller.vue
index bdc9deef1..1994b1bc5 100644
--- a/src/components/Main/MainView/MessagesScroller.vue
+++ b/src/components/Main/MainView/MessagesScroller.vue
@@ -3,9 +3,9 @@
@@ -20,17 +20,14 @@ import {
computed,
SetupContext,
ref,
- onMounted
+ onMounted,
+ PropType
} from '@vue/composition-api'
import { MessageId } from '@/types/entity-ids'
import store from '@/store'
import MessageElement from './MessageElement/MessageElement.vue'
import { throttle } from 'lodash-es'
-interface Props {
- messageIds: MessageId[]
-}
-
const LOAD_MORE_THRESHOLD = 10
export default defineComponent({
@@ -40,11 +37,11 @@ export default defineComponent({
},
props: {
messageIds: {
- type: Array,
+ type: Array as PropType,
required: true
}
},
- setup(props: Props, context: SetupContext) {
+ setup(props, context: SetupContext) {
const state = reactive({
height: 0,
scrollTop: 0,
@@ -107,7 +104,6 @@ export default defineComponent({
}
return {
- props,
state,
rootRef,
handleScroll,
diff --git a/src/components/Main/MainView/MessagesView.vue b/src/components/Main/MainView/MessagesView.vue
index bf100515d..eae5c5337 100644
--- a/src/components/Main/MainView/MessagesView.vue
+++ b/src/components/Main/MainView/MessagesView.vue
@@ -10,7 +10,7 @@
v-if="fileDragDropState.isDragging"
:class="$style.fileUploadOverlay"
/>
-
+
@@ -32,9 +32,6 @@ import MessageInput from '@/components/Main/MainView/MessageInput/MessageInput.v
import MessagesViewFileUploadOverlay from './MessagesViewFileUploadOverlay.vue'
import { debounce } from 'lodash-es'
-type Props = {
- channelId: ChannelId
-}
const useFileDragDrop = (dropAreaRef: Ref) => {
const state = reactive({
isDragging: false
@@ -65,9 +62,8 @@ const useFileDragDrop = (dropAreaRef: Ref) => {
export default defineComponent({
name: 'MessagesView',
- props: { channelId: String },
components: { MessagesScroller, MessageInput, MessagesViewFileUploadOverlay },
- setup(props: Props, _: SetupContext) {
+ setup() {
const state = reactive({
channelMessageIds: computed(
() => store.state.domain.messagesView.messageIds
@@ -88,7 +84,6 @@ export default defineComponent({
containerRef
)
return {
- props,
state,
fileDragDropState,
containerStyle,
diff --git a/src/components/Main/Modal/SettingModal/NavigationContent.vue b/src/components/Main/Modal/SettingModal/NavigationContent.vue
index cfed6224c..d87077ecd 100644
--- a/src/components/Main/Modal/SettingModal/NavigationContent.vue
+++ b/src/components/Main/Modal/SettingModal/NavigationContent.vue
@@ -1,16 +1,22 @@
diff --git a/src/components/Main/Modal/SettingModal/NavigationContentTitle.vue b/src/components/Main/Modal/SettingModal/NavigationContentTitle.vue
index b1a6f4eaf..fdfebb657 100644
--- a/src/components/Main/Modal/SettingModal/NavigationContentTitle.vue
+++ b/src/components/Main/Modal/SettingModal/NavigationContentTitle.vue
@@ -5,23 +5,19 @@
diff --git a/src/components/Main/Modal/UserModal/GroupsTab.vue b/src/components/Main/Modal/UserModal/GroupsTab.vue
index 689a69773..a0674e675 100644
--- a/src/components/Main/Modal/UserModal/GroupsTab.vue
+++ b/src/components/Main/Modal/UserModal/GroupsTab.vue
@@ -18,7 +18,12 @@
diff --git a/src/components/Main/Navigation/ChannelList/ChannelList.vue b/src/components/Main/Navigation/ChannelList/ChannelList.vue
index dbfdfe88d..7f7edf7c6 100644
--- a/src/components/Main/Navigation/ChannelList/ChannelList.vue
+++ b/src/components/Main/Navigation/ChannelList/ChannelList.vue
@@ -1,12 +1,12 @@
@@ -20,7 +20,8 @@ import {
reactive,
set,
toRefs,
- SetupContext
+ SetupContext,
+ PropType
} from '@vue/composition-api'
import store from '@/store'
import { ChannelId } from '@/types/entity-ids'
@@ -45,11 +46,6 @@ const useChannelFolding = () => {
}
}
-type Props = {
- channels: ChannelTreeNode[]
- ignoreChildren: boolean
-}
-
export default defineComponent({
name: 'ChannelList',
components: {
@@ -58,7 +54,7 @@ export default defineComponent({
},
props: {
channels: {
- type: Array,
+ type: Array as PropType,
required: true
},
ignoreChildren: {
@@ -66,11 +62,10 @@ export default defineComponent({
default: false
}
},
- setup(props: Props, context: SetupContext) {
+ setup(props, context) {
const { onChannelSelect } = useChannelSelect(context)
const { channelFoldingState, onChannelFoldingToggle } = useChannelFolding()
return {
- props,
channelFoldingState,
onChannelSelect,
onChannelFoldingToggle
diff --git a/src/components/Main/Navigation/DesktopNavigationSelector.vue b/src/components/Main/Navigation/DesktopNavigationSelector.vue
index 3db471278..cea56e918 100644
--- a/src/components/Main/Navigation/DesktopNavigationSelector.vue
+++ b/src/components/Main/Navigation/DesktopNavigationSelector.vue
@@ -7,7 +7,7 @@
@click="onNavigationItemClick(item.type)"
>
@@ -19,7 +19,12 @@
diff --git a/src/components/Main/Navigation/NavigationContent/Activity.vue b/src/components/Main/Navigation/NavigationContent/Activity.vue
index b17824861..95b20a140 100644
--- a/src/components/Main/Navigation/NavigationContent/Activity.vue
+++ b/src/components/Main/Navigation/NavigationContent/Activity.vue
@@ -20,14 +20,12 @@ import { makeStyles } from '@/lib/styles'
import store from '@/store'
import ActivityElement from './ActivityElement.vue'
-type Props = {}
-
export default defineComponent({
name: 'Activity',
components: {
ActivityElement
},
- setup(props: Props, context: SetupContext) {
+ setup(_, context: SetupContext) {
const state = reactive({
messages: computed(() => store.state.domain.channelActivity)
})
diff --git a/src/components/Main/Navigation/NavigationContent/ActivityElement.vue b/src/components/Main/Navigation/NavigationContent/ActivityElement.vue
index bb6fe846b..673ba61e9 100644
--- a/src/components/Main/Navigation/NavigationContent/ActivityElement.vue
+++ b/src/components/Main/Navigation/NavigationContent/ActivityElement.vue
@@ -9,16 +9,16 @@
-
+
diff --git a/src/components/Main/Navigation/NavigationContent/UsersSeparator.vue b/src/components/Main/Navigation/NavigationContent/UsersSeparator.vue
index e81d04e8d..19af2dc35 100644
--- a/src/components/Main/Navigation/NavigationContent/UsersSeparator.vue
+++ b/src/components/Main/Navigation/NavigationContent/UsersSeparator.vue
@@ -1,6 +1,6 @@
- {{ props.name }}
+ {{ name }}
@@ -12,8 +12,6 @@ import store from '@/store'
import { makeStyles } from '@/lib/styles'
import Icon from '@/components/UI/Icon.vue'
-type Props = { name: string; isOpen: boolean }
-
export default defineComponent({
name: 'UsersSeparator',
components: {
@@ -23,9 +21,8 @@ export default defineComponent({
name: { type: String, default: '' },
isOpen: { type: Boolean, default: false }
},
- setup(props: Props) {
+ setup(props) {
return {
- props,
containerStyle: makeStyles(theme => ({
borderColor: theme.ui.tertiary,
color: theme.ui.secondary
diff --git a/src/components/Main/Navigation/NavigationContentContainer.vue b/src/components/Main/Navigation/NavigationContentContainer.vue
index 964641d87..96c7f7d5a 100644
--- a/src/components/Main/Navigation/NavigationContentContainer.vue
+++ b/src/components/Main/Navigation/NavigationContentContainer.vue
@@ -2,7 +2,7 @@
@@ -16,22 +16,16 @@
import { defineComponent } from '@vue/composition-api'
import { makeStyles } from '@/lib/styles'
-type Props = { subtitle?: string }
-
export default defineComponent({
name: 'NavigationContentContainer',
props: {
- subtitle: {
- type: String,
- required: false
- }
+ subtitle: String
},
- setup(props: Props) {
+ setup() {
const subtitleStyle = makeStyles(theme => ({
color: theme.ui.secondary
}))
return {
- props,
subtitleStyle
}
}
diff --git a/src/components/Main/Navigation/NavigationContentTitle.vue b/src/components/Main/Navigation/NavigationContentTitle.vue
index 5a470dec8..230a34f5a 100644
--- a/src/components/Main/Navigation/NavigationContentTitle.vue
+++ b/src/components/Main/Navigation/NavigationContentTitle.vue
@@ -5,26 +5,22 @@
diff --git a/src/components/Main/StampPicker/StampPickerEffectSelector.vue b/src/components/Main/StampPicker/StampPickerEffectSelector.vue
index ca1e80e77..55965ffa1 100644
--- a/src/components/Main/StampPicker/StampPickerEffectSelector.vue
+++ b/src/components/Main/StampPicker/StampPickerEffectSelector.vue
@@ -3,16 +3,12 @@
diff --git a/src/components/Main/StampPicker/StampPickerStampListItem.vue b/src/components/Main/StampPicker/StampPickerStampListItem.vue
index b50f1ddae..80d70d766 100644
--- a/src/components/Main/StampPicker/StampPickerStampListItem.vue
+++ b/src/components/Main/StampPicker/StampPickerStampListItem.vue
@@ -6,12 +6,17 @@
:class="$style.container"
:style="styles.container"
>
-
+
diff --git a/src/components/Main/StampPicker/StampPickerStampSetSelector.vue b/src/components/Main/StampPicker/StampPickerStampSetSelector.vue
index 97f40cad2..6967fb69a 100644
--- a/src/components/Main/StampPicker/StampPickerStampSetSelector.vue
+++ b/src/components/Main/StampPicker/StampPickerStampSetSelector.vue
@@ -2,11 +2,11 @@
@@ -14,7 +14,7 @@
diff --git a/src/components/Main/StampPicker/StampPickerStampSetSelectorItem.vue b/src/components/Main/StampPicker/StampPickerStampSetSelectorItem.vue
index fc7a9820e..8177dfa09 100644
--- a/src/components/Main/StampPicker/StampPickerStampSetSelectorItem.vue
+++ b/src/components/Main/StampPicker/StampPickerStampSetSelectorItem.vue
@@ -5,24 +5,24 @@
@click="context.emit('click')"
>
diff --git a/src/components/UI/CircleIcon.vue b/src/components/UI/CircleIcon.vue
index 3645df58a..aa3e15889 100644
--- a/src/components/UI/CircleIcon.vue
+++ b/src/components/UI/CircleIcon.vue
@@ -2,10 +2,10 @@
@@ -25,15 +25,6 @@ const useStyles = (props: { background: string; size: number }) => {
})
}
-type Props = {
- color: string
- background: string
- name: string
- mdi?: boolean
- innerSize: number
- size: number
-}
-
export default defineComponent({
name: 'CircleIcon',
components: { Icon },
@@ -60,9 +51,9 @@ export default defineComponent({
default: 24
}
},
- setup(props: Props) {
+ setup(props) {
const styles = useStyles(props)
- return { props, styles }
+ return { styles }
}
})
diff --git a/src/components/UI/EmptyState.vue b/src/components/UI/EmptyState.vue
index 1dda6241a..344b3493e 100644
--- a/src/components/UI/EmptyState.vue
+++ b/src/components/UI/EmptyState.vue
@@ -8,11 +8,9 @@
import { defineComponent } from '@vue/composition-api'
import { makeStyles } from '@/lib/styles'
-type Props = {}
-
export default defineComponent({
name: 'EmptyState',
- setup(props: Props) {
+ setup() {
return {
containerStyle: makeStyles(theme => ({
color: theme.ui.tertiary
diff --git a/src/components/UI/FilterInput.vue b/src/components/UI/FilterInput.vue
index 676158c90..ced8c1cc4 100644
--- a/src/components/UI/FilterInput.vue
+++ b/src/components/UI/FilterInput.vue
@@ -4,8 +4,8 @@
@@ -13,18 +13,12 @@
diff --git a/src/components/UI/Icon.vue b/src/components/UI/Icon.vue
index e0efb21ba..f89ba3b09 100644
--- a/src/components/UI/Icon.vue
+++ b/src/components/UI/Icon.vue
@@ -1,25 +1,25 @@
diff --git a/src/components/UI/UserIcon.vue b/src/components/UI/UserIcon.vue
index 3a917d42a..7d05245bf 100644
--- a/src/components/UI/UserIcon.vue
+++ b/src/components/UI/UserIcon.vue
@@ -9,7 +9,8 @@ import {
defineComponent,
SetupContext,
reactive,
- computed
+ computed,
+ PropType
} from '@vue/composition-api'
import { makeStyles } from '@/lib/styles'
import api, { buildUserIconPath } from '@/lib/api'
@@ -18,25 +19,23 @@ import store from '@/store'
type IconSize = 160 | 64 | 48 | 44 | 40 | 36 | 32 | 28 | 24 | 20
-type Props = { userId: UserId; size: IconSize; preventModal: boolean }
-
export default defineComponent({
name: 'UserIcon',
props: {
userId: {
- type: String,
+ type: String as PropType,
required: true
},
size: {
- type: Number,
- default: 36 as IconSize
+ type: Number as PropType,
+ default: 36
},
preventModal: {
type: Boolean,
default: false
}
},
- setup(props: Props, context: SetupContext) {
+ setup(props) {
const styles = reactive({
container: makeStyles(theme => ({
color: theme.ui.secondary,
@@ -58,7 +57,6 @@ export default defineComponent({
}
}
return {
- props,
styles,
onClick
}
diff --git a/src/components/UI/VirtualScroller.vue b/src/components/UI/VirtualScroller.vue
index d906f5d4f..dbcc56402 100644
--- a/src/components/UI/VirtualScroller.vue
+++ b/src/components/UI/VirtualScroller.vue
@@ -4,8 +4,8 @@
@@ -25,17 +25,11 @@ import {
toRefs,
onMounted,
onUnmounted,
- watch
+ watch,
+ PropType
} from '@vue/composition-api'
-import { SetupContext } from '@vue/composition-api/dist/component/component'
// import { ResizeObserver } from '@juggle/resize-observer'
-
-const throttle = require('lodash.throttle')
-
-interface Props {
- items: any[]
- key: string
-}
+import { throttle } from 'lodash-es'
const binarySearch = (arr: number[], x: number) => {
let low = 0
@@ -90,8 +84,17 @@ const PAGE_SIZE = 50
export default defineComponent({
name: 'VirtualScroller',
- props: { items: Array },
- setup(props: Props, context: SetupContext) {
+ props: {
+ items: {
+ type: Array,
+ required: true
+ },
+ key: {
+ type: String,
+ required: true
+ }
+ },
+ setup(props, context) {
const state = reactive({
isMounted: false,
isLoading: false,
@@ -303,7 +306,6 @@ export default defineComponent({
)
return {
- props,
rootRef,
spacerRef,
handleScroll,
diff --git a/src/views/Auth.vue b/src/views/Auth.vue
index a0cac3933..8ad0df921 100644
--- a/src/views/Auth.vue
+++ b/src/views/Auth.vue
@@ -1,28 +1,29 @@
-
+
diff --git a/src/views/Main.vue b/src/views/Main.vue
index efe56f3cc..a8e0645d6 100644
--- a/src/views/Main.vue
+++ b/src/views/Main.vue
@@ -16,7 +16,7 @@
-
+
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
index 547c1ce63..cbcf0d59c 100644
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@@ -3,8 +3,8 @@
Not Found
-
- {{ props.routeName }} {{ props.routeParam }} is not found on traQ!
+
+ {{ routeName }} {{ routeParam }} is not found on traQ!
Path {{ $route.path }} is not found on traQ!
back
@@ -15,11 +15,6 @@
import { defineComponent, reactive } from '@vue/composition-api'
import { makeStyles } from '@/lib/styles'
-type Props = {
- routeName?: string
- routeParam?: string
-}
-
const useStyle = () =>
reactive({
container: makeStyles(theme => ({
@@ -30,18 +25,11 @@ const useStyle = () =>
export default defineComponent({
name: 'NotFound',
props: {
- routeName: {
- type: String,
- required: false
- },
- routeParam: {
- type: String,
- required: false
- }
+ routeName: String,
+ routeParam: String
},
- setup(props: Props) {
+ setup() {
return {
- props,
style: useStyle()
}
}