Fix useModelMigration in async components

src/components/NcActionCheckbox/NcActionCheckbox.vue

@@ -139,8 +139,8 @@ export default {
 		'update:model-value',
 	],
 
-	setup() {
-		const model = useModelMigration('checked', 'update:checked')
+	setup(props, {emit}) {
+		const model = useModelMigration(props, emit, 'checked', 'update:checked')
 		return {
 			model,
 		}

src/components/NcActionInput/NcActionInput.vue

@@ -416,8 +416,8 @@ export default {
 		'update:model-value',
 	],
 
-	setup() {
-		const model = useModelMigration('value', 'update:value')
+	setup(props, {emit}) {
+		const model = useModelMigration(props, emit, 'value', 'update:value')
 		return {
 			model,
 		}

src/components/NcActionRadio/NcActionRadio.vue

@@ -158,12 +158,12 @@ export default {
 		'change',
 	],
 
-	setup(props) {
+	setup(props, {emit}) {
 		if (typeof props.modelValue === 'boolean') {
 			Vue.util.warn('[NcActionRadio] Boolean type of `modelValue` is deprecated and will be removed in next versions')
 		}
 
-		const model = useModelMigration('checked', 'update:checked')
+		const model = useModelMigration(props, emit, 'checked', 'update:checked')
 		return {
 			model,
 		}

src/components/NcActionTextEditable/NcActionTextEditable.vue

@@ -166,8 +166,8 @@ export default {
 		'submit',
 	],
 
-	setup() {
-		const model = useModelMigration('value', 'update:value')
+	setup(props, {emit}) {
+		const model = useModelMigration(props, emit, 'value', 'update:value')
 		return {
 			model,
 			isRtl,

src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue

@@ -477,8 +477,8 @@ export default {
 		'update:model-value',
 	],
 
-	setup() {
-		const model = useModelMigration('checked', 'update:checked')
+	setup(props, {emit}) {
+		const model = useModelMigration(props, emit, 'checked', 'update:checked')
 		return {
 			model,
 		}

src/components/NcColorPicker/NcColorPicker.vue

@@ -318,8 +318,8 @@ export default {
 		'input',
 	],
 
-	setup() {
-		const model = useModelMigration('value', 'update:value', true)
+	setup(props, {emit}) {
+		const model = useModelMigration(props, emit, 'value', 'update:value', true)
 		return {
 			model,
 		}

src/components/NcDateTimePicker/NcDateTimePicker.vue

@@ -302,8 +302,8 @@ export default {
 		'update:timezone-id',
 	],
 
-	setup() {
-		const model = useModelMigration('value', 'update:value')
+	setup(props, {emit}) {
+		const model = useModelMigration(props, emit, 'value', 'update:value')
 		return {
 			model,
 			timezoneDialogHeaderId: `timezone-dialog-header-${GenRandomId()}`,

src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue

@@ -218,8 +218,8 @@ export default {
 		'update:model-value',
 	],
 
-	setup() {
-		const model = useModelMigration('value', 'input')
+	setup(props, {emit}) {
+		const model = useModelMigration(props, emit, 'value', 'input')
 		return {
 			model,
 		}

src/components/NcInputField/NcInputField.vue

@@ -272,8 +272,8 @@ export default {
 		'trailing-button-click',
 	],
 
-	setup() {
-		const model = useModelMigration('value', 'update:value', true)
+	setup(props, {emit}) {
+		const model = useModelMigration(props, emit, 'value', 'update:value', true)
 		return {
 			model,
 		}

src/components/NcPasswordField/NcPasswordField.vue

@@ -248,8 +248,8 @@ export default {
 		'update:model-value',
 	],
 
-	setup() {
-		const model = useModelMigration('value', 'update:value')
+	setup(props, {emit}) {
+		const model = useModelMigration(props, emit, 'value', 'update:value')
 		return {
 			model,
 		}

src/components/NcRichContenteditable/NcRichContenteditable.vue

@@ -438,9 +438,9 @@ export default {
 		'smart-picker-submit',
 	],
 
-	setup() {
+	setup(props, {emit}) {
 		const uid = GenRandomId(5)
-		const model = useModelMigration('value', 'update:value', true)
+		const model = useModelMigration(props, emit, 'value', 'update:value', true)
 		return {
 			model,
 			// Constants

src/components/NcSelect/NcSelect.vue

@@ -990,12 +990,12 @@ export default {
 		'update:model-value',
 	],
 
-	setup() {
+	setup(props, {emit}) {
 		const clickableArea = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-clickable-area'))
 		const gridBaseLine = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-grid-baseline'))
 		const avatarSize = clickableArea - 2 * gridBaseLine
 
-		const model = useModelMigration('value', 'input')
+		const model = useModelMigration(props, emit, 'value', 'input')
 
 		return {
 			avatarSize,

src/components/NcSelectTags/NcSelectTags.vue

@@ -293,8 +293,8 @@ export default {
 		' ',
 	],
 
-	setup() {
-		const model = useModelMigration('value', 'input')
+	setup(props, {emit}) {
+		const model = useModelMigration(props, emit, 'value', 'input')
 		const noop = () => {}
 		return {
 			model,

src/components/NcSettingsInputText/NcSettingsInputText.vue

@@ -133,8 +133,8 @@ export default {
 		'change',
 	],
 
-	setup() {
-		const model = useModelMigration('value', 'update:value')
+	setup(props, {emit}) {
+		const model = useModelMigration(props, emit, 'value', 'update:value')
 		return {
 			model,
 		}

src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue

@@ -137,8 +137,8 @@ export default {
 		'update:model-value',
 		'error',
 	],
-	setup() {
-		const model = useModelMigration('value', 'input')
+	setup(props, {emit}) {
+		const model = useModelMigration(props, emit, 'value', 'input')
 		return {
 			model,
 		}

src/components/NcTextArea/NcTextArea.vue

@@ -267,8 +267,8 @@ export default {
 		'update:model-value',
 	],
 
-	setup() {
-		const model = useModelMigration('value', 'update:value', true)
+	setup(props, {emit}) {
+		const model = useModelMigration(props, emit, 'value', 'update:value', true)
 		return {
 			model,
 		}

src/components/NcTextField/NcTextField.vue

@@ -226,8 +226,8 @@ export default {
 		'update:model-value',
 	],
 
-	setup() {
-		const model = useModelMigration('value', 'update:value')
+	setup(props, {emit}) {
+		const model = useModelMigration(props, emit, 'value', 'update:value')
 		return {
 			model,
 		}

src/components/NcTimezonePicker/NcTimezonePicker.vue

@@ -101,8 +101,8 @@ export default {
 		/** Same as update:modelValue for Vue 2 compatibility */
 		'update:model-value',
 	],
-	setup() {
-		const model = useModelMigration('value', 'input')
+	setup(props, {emit}) {
+		const model = useModelMigration(props, emit, 'value', 'input')
 		return {
 			model,
 		}

src/composables/useModelMigration.ts

@@ -3,37 +3,40 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import Vue, { getCurrentInstance, computed } from 'vue'
+import Vue, { computed } from 'vue'
+import type { WritableComputedRef } from 'vue'
+import type { EmitFn } from 'vue/types/v3-setup-context'
+import type { DefaultProps } from 'vue/types/options'
 
 /**
  * Create model proxy to new v9 model (modelValue + update:modelValue) with a fallback to old model
- * @param {string} oldModelName - Name of model prop in nextcloud-vue v8
- * @param {string} oldModelEvent - Event name of model event in nextcloud-vue v8
- * @param {boolean} required - If the prop is required
- * @return {import('vue').WritableComputedRef} - model proxy
+ * @param props - Original props from setup()
+ * @param emit - Original emit from setup()
+ * @param oldModelName - Name of model prop in nextcloud-vue v8
+ * @param oldModelEvent - Event name of model event in nextcloud-vue v8
+ * @param required - If the prop is required
+ * @return model proxy
  */
-export function useModelMigration(oldModelName, oldModelEvent, required = false) {
-	const vm = getCurrentInstance()!.proxy
-
-	if (required && vm.$props[oldModelName] === undefined && vm.$props.modelValue === undefined) {
+export function useModelMigration(props: DefaultProps, emit: EmitFn, oldModelName: string, oldModelEvent: string, required: boolean = false): WritableComputedRef<any> {
+	if (required && props[oldModelName] === undefined && props.modelValue === undefined) {
 		Vue.util.warn(`Missing required prop: "modelValue" or old "${oldModelName}"`)
 	}
 
 	const model = computed({
 		get() {
-			if (vm.$props[oldModelName] !== undefined) {
-				return vm.$props[oldModelName]
+			if (props[oldModelName] !== undefined) {
+				return props[oldModelName]
 			}
-			return vm.$props.modelValue
+			return props.modelValue
 		},
 
 		set(value) {
 			// New nextcloud-vue v9 event
-			vm.$emit('update:modelValue', value)
+			emit('update:modelValue', value)
 			// Vue 2 fallback for kebab-case event names in templates (recommended by Vue 3 style guide)
-			vm.$emit('update:model-value', value)
+			emit('update:model-value', value)
 			// Old nextcloud-vue v8 event
-			vm.$emit(oldModelEvent, value)
+			emit(oldModelEvent, value)
 		},
 	})