diff --git a/active-rfcs/0000-v-model-details-dialog.md b/active-rfcs/0000-v-model-details-dialog.md new file mode 100644 index 00000000..84632ea2 --- /dev/null +++ b/active-rfcs/0000-v-model-details-dialog.md @@ -0,0 +1,85 @@ +- Start Date: 2023-04-07 +- Target Major Version: 3.x +- Reference Issues: (fill in existing related issues, if any) +- Implementation PR: https://github.com/vuejs/core/pull/8048 + +# Summary + +Support built-in `v-model` binding for the native [`<details>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) and [`<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog). + +# Basic example + +```html +<script setup> +import { ref } from 'vue' + +const show = ref(false) +</script> + +<template> + <details v-model="show"> + <summary>Summary</summary> + <span>Details</span> + </details> + + <dialog v-model="show"> + <form method="dialog"> + <button>OK</button> + </form> + </dialog> +</template> +``` + +When toggling the `<details>` or `<dialog>` element, the value of `show` should be reflected. Or once `show` has been modified, the details should expand/collapse automatically. + +# Motivation + +Currently we support `v-model` built-in on `input`, `textarea`, `select`, which is convenient to bind the value to them. However, when it comes to `<details>` and `<dialog>`, `v-model` will throw and users would need to bind manually. Which could be a bit counterintuitive. + +Since `<details>` and `<dialog>` are native elements, it makes sense to have built-in support for them. + +For now, users would need to manually bind them as: + +```html +<script setup> +import { ref } from 'vue' + +const show = ref(false) +</script> + +<template> + <details :open="show" @toggle="show = $event.target.open"> + <summary>Summary</summary> + <span>Details</span> + </details> + + <dialog :open="show" @close="show = false"> + <form method="dialog"> + <button>OK</button> + </form> + </dialog> +</template> +``` + +- [Playground Before](https://play.vuejs.org/#eNp9Us1qg0AQfpXtUkgLiUJbKAQjFnrroYf2uBejo7Fxf9gdE4r47p1VY0wCPS0z8/05Y8vfjAkODfA1j1xmK4PMATYmFqqSRltkLbNQsI4VVku2IOhCKKEyrRxBd/rINh7wUKS1g0ehonCQIQEqEKSpUwSqGIu2DaJWLMnqKttvBB/pd/4VvMcw9q3LsoY1a1vf7rqeGQ7UHtI3csC0qh1bawNqlBKcJdizz9r3cACFAaa2BAw8eDKKXCNlan/jr+Gl5GPjNDepit8HIxr6aggzms/SVGmty5swWa3dLEu/orN9oa1kEnCnc8IMEtN02lb8+XHx9d7fM09RehoVUTjtmi/5cLuVTE3w47Si67Z92HHgBKcFD3KC0019LfgO0bh1GDbK7Msg0zJMaBbaRmElYZVrmTwHT8HLK9k6nPcDcHK1tfrowJKj4MuZeEjNA9iVBZWDBfuv2RX2wvBqdmPqPel/6Xj3B2p5994=) +- [Playground After](https://deploy-preview-8048--vue-sfc-playground.netlify.app/#eNp1UL1OwzAQfpXDS2GA7JUbgcTGwACjF5NcUgvbZ9lOEYry7vVPGrVDp9N335/PM3tz7uU0IdszHjqvXISAcXKtsMo48hFm8DjAAoMnA7sk3QkrbEc2JOmR/uCQBY+D1AGfhOVNjUkBCUQ0TsuICQHwnylGsvDaadX9HgRb7Q95ClY0AN80jhr3MM95vSzF2VRrkZRFj1EqHeD0bKhHvYZtITxMxkj/337VmV61Li68k7Z9ryGJzKgWrcFXTUpqGu8WDeQNGIxH6hNXxRu73dx+ftzckJuy81JabAnwZvsxtpwBN2KL3g==) + +# Detailed design + +This is should be a compiler improvement, to be able to transform `v-model` on the `<details>` and `<dialog>` elements with `open` and `@toggle`. + +# Drawbacks + +It might theoretically conflict if users managed to implement a nodeTransformer on the user land to support `v-model` on `<details>` or `<dialog>`. But we are not aware of any existing library doing this. + +# Alternatives + +N/A + +# Adoption strategy + +This is a new feature and should not affect the existing code. + +# Unresolved questions + +N/A