diff --git a/src/components/NcActionCheckbox/NcActionCheckbox.vue b/src/components/NcActionCheckbox/NcActionCheckbox.vue index e4f46c3cba..183f287ca6 100644 --- a/src/components/NcActionCheckbox/NcActionCheckbox.vue +++ b/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, } diff --git a/src/components/NcActionInput/NcActionInput.vue b/src/components/NcActionInput/NcActionInput.vue index 9c6c9f9806..efbe8aa3d3 100644 --- a/src/components/NcActionInput/NcActionInput.vue +++ b/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, } diff --git a/src/components/NcActionRadio/NcActionRadio.vue b/src/components/NcActionRadio/NcActionRadio.vue index 7ed721193d..504de1b44f 100644 --- a/src/components/NcActionRadio/NcActionRadio.vue +++ b/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, } diff --git a/src/components/NcActionTextEditable/NcActionTextEditable.vue b/src/components/NcActionTextEditable/NcActionTextEditable.vue index f1c5990706..f1f1015015 100644 --- a/src/components/NcActionTextEditable/NcActionTextEditable.vue +++ b/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, diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue index 832e16d1b9..33cfc00cd2 100644 --- a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue +++ b/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, } diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/src/components/NcColorPicker/NcColorPicker.vue index d2ec1a5434..e04b3e0afb 100644 --- a/src/components/NcColorPicker/NcColorPicker.vue +++ b/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, } diff --git a/src/components/NcDateTimePicker/NcDateTimePicker.vue b/src/components/NcDateTimePicker/NcDateTimePicker.vue index edf79f1bab..dfb5148a59 100644 --- a/src/components/NcDateTimePicker/NcDateTimePicker.vue +++ b/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()}`, diff --git a/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue b/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue index 943d276ce6..cb891d3c95 100644 --- a/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue +++ b/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, } diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue index 59b39b62f1..8e0778ba96 100644 --- a/src/components/NcInputField/NcInputField.vue +++ b/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, } diff --git a/src/components/NcPasswordField/NcPasswordField.vue b/src/components/NcPasswordField/NcPasswordField.vue index f2a8a7adc5..1e37918542 100644 --- a/src/components/NcPasswordField/NcPasswordField.vue +++ b/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, } diff --git a/src/components/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue index 6d0c83cd65..3b75c3e3fd 100644 --- a/src/components/NcRichContenteditable/NcRichContenteditable.vue +++ b/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 diff --git a/src/components/NcSelect/NcSelect.vue b/src/components/NcSelect/NcSelect.vue index 6bdeb56969..64e02dfb2d 100644 --- a/src/components/NcSelect/NcSelect.vue +++ b/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, diff --git a/src/components/NcSelectTags/NcSelectTags.vue b/src/components/NcSelectTags/NcSelectTags.vue index adae9b0b80..10215ec821 100644 --- a/src/components/NcSelectTags/NcSelectTags.vue +++ b/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, diff --git a/src/components/NcSettingsInputText/NcSettingsInputText.vue b/src/components/NcSettingsInputText/NcSettingsInputText.vue index c6bab3c021..6bf8611545 100644 --- a/src/components/NcSettingsInputText/NcSettingsInputText.vue +++ b/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, } diff --git a/src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue b/src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue index 8e496e46b2..8fd516b134 100644 --- a/src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue +++ b/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, } diff --git a/src/components/NcTextArea/NcTextArea.vue b/src/components/NcTextArea/NcTextArea.vue index 6104d0699b..4e5fd2133e 100644 --- a/src/components/NcTextArea/NcTextArea.vue +++ b/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, } diff --git a/src/components/NcTextField/NcTextField.vue b/src/components/NcTextField/NcTextField.vue index 72ffa22bbe..8dc58177a6 100644 --- a/src/components/NcTextField/NcTextField.vue +++ b/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, } diff --git a/src/components/NcTimezonePicker/NcTimezonePicker.vue b/src/components/NcTimezonePicker/NcTimezonePicker.vue index 33dd02c591..befe147654 100644 --- a/src/components/NcTimezonePicker/NcTimezonePicker.vue +++ b/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, } diff --git a/src/composables/useModelMigration.ts b/src/composables/useModelMigration.ts index 0e44f5843b..4f709b69b3 100644 --- a/src/composables/useModelMigration.ts +++ b/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 { + 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) }, })