refactor: replace defineModels with defineModel

zio/stable
三咲智子 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<{
(event: 'close'): void
}>()
const { modelValue: visible } = defineModels<{
modelValue?: boolean
}>()
const visible = defineModel<boolean>()
function close() {
emit('close')

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,13 +1,11 @@
<script lang="ts" setup>
let { modelValue } = $defineModels<{
modelValue: boolean
}>()
const modelValue = defineModel<boolean>({ required: true })
const colorMode = useColorMode()
const userSettings = useUserSettings()
function toggleVisible() {
modelValue = !modelValue
modelValue.value = !modelValue
}
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 (modelValue) {
document.removeEventListener('click', clickEvent)
modelValue = false
modelValue.value = false
}
}
}

View File

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

View File

@ -1,9 +1,7 @@
<script setup lang="ts">
import Fuse from 'fuse.js'
let { modelValue } = $defineModels<{
modelValue: string
}>()
const modelValue = defineModel<string>({ required: true })
const { t } = useI18n()
const userSettings = useUserSettings()
@ -24,7 +22,7 @@ const languages = $computed(() =>
if (a === 'en')
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) {
modelValue = language
modelValue.value = language
}
</script>

View File

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

View File

@ -1,11 +1,9 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
const { form } = defineModels<{
form: {
fieldsAttributes: NonNullable<mastodon.v1.UpdateCredentialsParams['fieldsAttributes']>
}
}>()
const form = defineModel<{
fieldsAttributes: NonNullable<mastodon.v1.UpdateCredentialsParams['fieldsAttributes']>
}>({ required: true })
const dropdown = $ref<any>()
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
'stale-dep/nuxt',
],
vue: {
defineModel: true,
},
macros: {
setupSFC: true,
betterDefine: false,
defineModels: false,
},
devtools: {
enabled: true,

View File

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

View File

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