refactor: replace defineModels with defineModel

This commit is contained in:
三咲智子 Kevin Deng 2023-08-01 17:43:55 +08:00
parent e6172ad38b
commit d23f1d39eb
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E
17 changed files with 35 additions and 56 deletions

View file

@ -2,9 +2,7 @@
const emit = defineEmits<{ const emit = defineEmits<{
(event: 'close'): void (event: 'close'): void
}>() }>()
const { modelValue: visible } = defineModels<{ const visible = defineModel<boolean>()
modelValue?: boolean
}>()
function close() { function close() {
emit('close') emit('close')

View file

@ -5,9 +5,7 @@ defineProps<{
iconChecked?: string iconChecked?: string
iconUnchecked?: string iconUnchecked?: string
}>() }>()
const { modelValue } = defineModels<{ const modelValue = defineModel<boolean | null>()
modelValue?: boolean | null
}>()
</script> </script>
<template> <template>

View file

@ -14,10 +14,7 @@ const props = withDefaults(defineProps<Props>(), {
stencilSizePercentage: 0.9, stencilSizePercentage: 0.9,
}) })
const { modelValue: file } = defineModels<{ const file = defineModel<File | null>()
/** Images to be cropped */
modelValue: File | null
}>()
const cropperDialog = ref(false) const cropperDialog = ref(false)

View file

@ -22,9 +22,7 @@ const emit = defineEmits<{
(event: 'error', code: number, message: string): void (event: 'error', code: number, message: string): void
}>() }>()
const { modelValue: file } = defineModels<{ const file = defineModel<FileWithHandle | null>()
modelValue: FileWithHandle | null
}>()
const { t } = useI18n() const { t } = useI18n()

View file

@ -4,9 +4,7 @@ defineProps<{
value: any value: any
hover?: boolean hover?: boolean
}>() }>()
const { modelValue } = defineModels<{ const modelValue = defineModel()
modelValue: any
}>()
</script> </script>
<template> <template>

View file

@ -8,9 +8,7 @@ const { options, command } = defineProps<{
command?: boolean command?: boolean
}>() }>()
const { modelValue } = defineModels<{ const modelValue = defineModel<string>({ required: true })
modelValue: string
}>()
const tabs = $computed(() => { const tabs = $computed(() => {
return options.map((option) => { return options.map((option) => {

View file

@ -6,9 +6,7 @@ const emit = defineEmits<{
(e: 'listUpdated', list: mastodon.v1.List): void (e: 'listUpdated', list: mastodon.v1.List): void
(e: 'listRemoved', id: string): void (e: 'listRemoved', id: string): void
}>() }>()
const { list } = defineModels<{ const list = defineModel<mastodon.v1.List>({ required: true })
list: mastodon.v1.List
}>()
const { t } = useI18n() const { t } = useI18n()
const client = useMastoClient() const client = useMastoClient()

View file

@ -49,13 +49,10 @@ const props = withDefaults(defineProps<Props>(), {
const emit = defineEmits<{ const emit = defineEmits<{
/** v-model dialog visibility */ /** v-model dialog visibility */
(event: 'close',): void (event: 'close'): void
}>() }>()
const { modelValue: visible } = defineModels<{ const visible = defineModel<boolean>({ required: true })
/** v-model dislog visibility */
modelValue: boolean
}>()
const deactivated = useDeactivated() const deactivated = useDeactivated()
const route = useRoute() const route = useRoute()
@ -80,6 +77,8 @@ defineExpose({
/** close the dialog */ /** close the dialog */
function close() { function close() {
if (!visible.value)
return
visible.value = false visible.value = false
emit('close') emit('close')
} }

View file

@ -12,9 +12,7 @@ const emit = defineEmits<{
(event: 'close'): void (event: 'close'): void
}>() }>()
const { modelValue } = defineModels<{ const modelValue = defineModel<number>({ required: true })
modelValue: number
}>()
const slideGap = 20 const slideGap = 20
const doubleTapTreshold = 250 const doubleTapTreshold = 250

View file

@ -1,13 +1,11 @@
<script lang="ts" setup> <script lang="ts" setup>
let { modelValue } = $defineModels<{ const modelValue = defineModel<boolean>({ required: true })
modelValue: boolean
}>()
const colorMode = useColorMode() const colorMode = useColorMode()
const userSettings = useUserSettings() const userSettings = useUserSettings()
function toggleVisible() { function toggleVisible() {
modelValue = !modelValue modelValue.value = !modelValue
} }
const buttonEl = ref<HTMLDivElement>() const buttonEl = ref<HTMLDivElement>()
@ -16,7 +14,7 @@ function clickEvent(mouse: MouseEvent) {
if (mouse.target && !buttonEl.value?.children[0].contains(mouse.target as any)) { if (mouse.target && !buttonEl.value?.children[0].contains(mouse.target as any)) {
if (modelValue) { if (modelValue) {
document.removeEventListener('click', clickEvent) document.removeEventListener('click', clickEvent)
modelValue = false modelValue.value = false
} }
} }
} }

View file

@ -3,9 +3,7 @@ defineProps<{
title?: string title?: string
message: string message: string
}>() }>()
const { modelValue } = defineModels<{ const modelValue = defineModel<boolean>({ required: true })
modelValue: boolean
}>()
</script> </script>
<template> <template>

View file

@ -1,9 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import Fuse from 'fuse.js' import Fuse from 'fuse.js'
let { modelValue } = $defineModels<{ const modelValue = defineModel<string>({ required: true })
modelValue: string
}>()
const { t } = useI18n() const { t } = useI18n()
const userSettings = useUserSettings() const userSettings = useUserSettings()
@ -24,7 +22,7 @@ const languages = $computed(() =>
if (a === 'en') if (a === 'en')
return -1 return -1
return a === modelValue ? -1 : b === modelValue ? 1 : a.localeCompare(b) return a === modelValue.value ? -1 : b === modelValue.value ? 1 : a.localeCompare(b)
}), }),
) )
@ -41,7 +39,7 @@ const preferredLanguages = computed(() => {
) )
function chooseLanguage(language: string) { function chooseLanguage(language: string) {
modelValue = language modelValue.value = language
} }
</script> </script>

View file

@ -3,16 +3,16 @@ const { editing } = defineProps<{
editing?: boolean editing?: boolean
}>() }>()
let { modelValue } = $defineModels<{ const modelValue = defineModel<string>({
modelValue: string required: true,
}>() })
const currentVisibility = $computed(() => const currentVisibility = $computed(() =>
statusVisibilities.find(v => v.value === modelValue) || statusVisibilities[0], statusVisibilities.find(v => v.value === modelValue.value) || statusVisibilities[0],
) )
function chooseVisibility(visibility: string) { function chooseVisibility(visibility: string) {
modelValue = visibility modelValue.value = visibility
} }
</script> </script>

View file

@ -1,11 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import type { mastodon } from 'masto' import type { mastodon } from 'masto'
const { form } = defineModels<{ const form = defineModel<{
form: {
fieldsAttributes: NonNullable<mastodon.v1.UpdateCredentialsParams['fieldsAttributes']> fieldsAttributes: NonNullable<mastodon.v1.UpdateCredentialsParams['fieldsAttributes']>
} }>({ required: true })
}>()
const dropdown = $ref<any>() const dropdown = $ref<any>()
const fieldIcons = computed(() => const fieldIcons = computed(() =>

View file

@ -34,8 +34,13 @@ export default defineNuxtConfig({
'~/modules/pwa/index', // change to '@vite-pwa/nuxt' once released and remove pwa module '~/modules/pwa/index', // change to '@vite-pwa/nuxt' once released and remove pwa module
'stale-dep/nuxt', 'stale-dep/nuxt',
], ],
vue: {
defineModel: true,
},
macros: { macros: {
setupSFC: true, setupSFC: true,
betterDefine: false,
defineModels: false,
}, },
devtools: { devtools: {
enabled: true, enabled: true,

View file

@ -77,8 +77,8 @@ onDeactivated(() => clearError(false))
<CommonPaginator ref="paginatorRef" :paginator="paginator"> <CommonPaginator ref="paginatorRef" :paginator="paginator">
<template #default="{ item }"> <template #default="{ item }">
<ListEntry <ListEntry
:list="item" :model-value="item"
@update:list="updateEntry" @update:model-value="updateEntry"
@list-removed="removeEntry" @list-removed="removeEntry"
/> />
</template> </template>

View file

@ -185,7 +185,7 @@ onReactivated(refreshInfo)
<!-- metadata --> <!-- metadata -->
<SettingsProfileMetadata v-if="isHydrated" v-model:form="form" /> <SettingsProfileMetadata v-if="isHydrated" v-model="form" />
<!-- actions --> <!-- actions -->
<div flex="~ gap2" justify-end> <div flex="~ gap2" justify-end>