feat: forward compatibility with v9 on v-model props/events

[ShGKme]

☑️ Resolves

This PR adds forward compatibility with next (v9) on v-model props/events

• modelValue prop fallbacks to an old prop
• update:modelValue is emitted together with an old event
• update:model-value is emitted as well to use the new Vue 3 recommended event style in template compatible with Vue 2

Implementation details:

• Added useModelMigration to create migration proxy that:
  • Returns a new model prop if an old one is not defined
  • Triggers a new event together with an old one on set
  • Checks if either old or new prop is provided for required model
• Use model proxy instead of old prop to get value
• Assign to model instead of $emit an old event
• Define new prop and event as well as define/update model option
• Update docs:
  • Mark the old interfaces as deprecated in docs
  • Use v-model in docs examples

Screenshots

Docs

required: true

📃 Components

• Check components with :checked + @update:checked:
  • NcActionCheckbox
  • NcActionRadio
  • NcCheckboxRadioSwitch
• Text input fields with :value + @update:value:
  • NcActionTextEditable
  • NcInputField
  • NcPasswordField
  • NcRichContenteditable
  • NcTextArea
  • NcTextField
• Selects (:value + @input):
  • NcSelect
  • NcSelectTags
  • NcSettingsSelectGroup
• Pickers (:value + @input):
  • NcColorPicker
  • NcDateTimePicker
  • NcDateTimePickerNative
  • NcTimezonePicker
• Special with :value + @update:value:
  • NcActionInput
• Misc.:
  • NcSettingsInputText (:value + @update:value)

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 3️⃣ Backport to next requested with a Vue 3 upgrade

[susnux]

I am not sure here, I had issues with this in past (accessing the proxy inside of the setup function).
Not sure if it was something in my code but for me I had to move the proxy access into the computed functions

[Antreesy]

We've been using similar approach for several major versions already in Talk for Vuex Store (useStore.js) in script setup components and composables, and so far didn't caught any errors with it.
Maybe some guard here with debug information would be safe (so if anyone encounters it, we can identify the reason)

[ShGKme]

@susnux This is not possible. This function returns either null or { proxy: instance }.

https://github.com/vuejs/vue/blob/main/src/v3/currentInstance.ts#L13

[ShGKme]

I understand this PR is quite huge. Maybe you can review at least some of them and check here?

• Components with :checked + @update:checked:
  • NcActionCheckbox
  • NcActionRadio
  • NcCheckboxRadioSwitch (@Antreesy, tested with v-model and :checked.sync)
• Text input fields with :value + @update:value:
  • NcActionTextEditable
  • NcInputField (@Antreesy, tested with v-model and :value.sync)
  • NcPasswordField (@Antreesy, tested with v-model and :value.sync)
  • NcRichContenteditable (@Antreesy, tested with v-model and :value.sync)
  • NcTextArea (@Antreesy, tested with v-model and :value.sync)
  • NcTextField (@Antreesy, tested with v-model and :value.sync)
• Selects (:value + @input):
  • NcSelect (@Antreesy, tested with v-model and :model-value + @input)
  • NcSelectTags
  • NcSettingsSelectGroup
• Pickers (:value + @input):
  • NcColorPicker (@Antreesy, tested with v-model and :value.sync)
  • NcDateTimePicker (@Antreesy, tested with v-model and :value.sync)
  • NcDateTimePickerNative
  • NcTimezonePicker
• Special with :value + @update:value:
  • NcActionInput (@Antreesy, tested native picker with v-model and :value.sync)
• Misc.:
  • NcSettingsInputText (:value + @update:value)

[Antreesy]

Tested used in Talk components, do not expect the rest to break anything

[susnux]

Tested some components, but reviewed code - looks sane!

[ShGKme]

🪄

[DorraJaouad]

Tested on components existing in Talk ✅ all good
Code-wise ✅