refactor: replace defineModels with defineModel
This commit is contained in:
parent
e6172ad38b
commit
d23f1d39eb
|
@ -2,9 +2,7 @@
|
|||
const emit = defineEmits<{
|
||||
(event: 'close'): void
|
||||
}>()
|
||||
const { modelValue: visible } = defineModels<{
|
||||
modelValue?: boolean
|
||||
}>()
|
||||
const visible = defineModel<boolean>()
|
||||
|
||||
function close() {
|
||||
emit('close')
|
||||
|
|
|
@ -5,9 +5,7 @@ defineProps<{
|
|||
iconChecked?: string
|
||||
iconUnchecked?: string
|
||||
}>()
|
||||
const { modelValue } = defineModels<{
|
||||
modelValue?: boolean | null
|
||||
}>()
|
||||
const modelValue = defineModel<boolean | null>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
@ -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)
|
||||
|
||||
|
|
|
@ -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()
|
||||
|
||||
|
|
|
@ -4,9 +4,7 @@ defineProps<{
|
|||
value: any
|
||||
hover?: boolean
|
||||
}>()
|
||||
const { modelValue } = defineModels<{
|
||||
modelValue: any
|
||||
}>()
|
||||
const modelValue = defineModel()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
@ -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) => {
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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')
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,9 +3,7 @@ defineProps<{
|
|||
title?: string
|
||||
message: string
|
||||
}>()
|
||||
const { modelValue } = defineModels<{
|
||||
modelValue: boolean
|
||||
}>()
|
||||
const modelValue = defineModel<boolean>({ required: true })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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(() =>
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue