From 88e89b63272a9c764fb4f9ec63c4174a026fd2c0 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Fri, 7 Apr 2023 11:05:31 +0200 Subject: [PATCH 1/3] feat: `v-model` on `
` --- active-rfcs/0000-details-element-v-model.md | 66 +++++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 active-rfcs/0000-details-element-v-model.md diff --git a/active-rfcs/0000-details-element-v-model.md b/active-rfcs/0000-details-element-v-model.md new file mode 100644 index 00000000..ffe6e814 --- /dev/null +++ b/active-rfcs/0000-details-element-v-model.md @@ -0,0 +1,66 @@ +- Start Date: 2023-04-07 +- Target Major Version: 3.x +- Reference Issues: (fill in existing related issues, if any) +- Implementation PR: (leave this empty) + +# Summary + +Support built-in `v-model` binding for the native [`
` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details). + +# Basic example + +```html + + + +``` + +When toggling the `
` 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 `
`, `v-model` will throw and users would need to bind maually. Which could be a bit counterintuitive. + +```html + + + +``` + +# Detailed design + +This is should be a compiler improvement, to be able to transform `v-model` on the `
` element with `open` and `@toggle`. + +# Drawbacks + +It might threoctially conflict if users managed to implement a nodeTransformer on the user land to support `v-model` on `
`. 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 From f162bdd1e0136c25ee7b97d5586de4275adf6b2c Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sat, 8 Apr 2023 12:29:26 +0200 Subject: [PATCH 2/3] feat: add dialog --- active-rfcs/0000-details-element-v-model.md | 66 ----------------- active-rfcs/0000-v-model-details-dialog.md | 82 +++++++++++++++++++++ 2 files changed, 82 insertions(+), 66 deletions(-) delete mode 100644 active-rfcs/0000-details-element-v-model.md create mode 100644 active-rfcs/0000-v-model-details-dialog.md diff --git a/active-rfcs/0000-details-element-v-model.md b/active-rfcs/0000-details-element-v-model.md deleted file mode 100644 index ffe6e814..00000000 --- a/active-rfcs/0000-details-element-v-model.md +++ /dev/null @@ -1,66 +0,0 @@ -- Start Date: 2023-04-07 -- Target Major Version: 3.x -- Reference Issues: (fill in existing related issues, if any) -- Implementation PR: (leave this empty) - -# Summary - -Support built-in `v-model` binding for the native [`
` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details). - -# Basic example - -```html - - - -``` - -When toggling the `
` 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 `
`, `v-model` will throw and users would need to bind maually. Which could be a bit counterintuitive. - -```html - - - -``` - -# Detailed design - -This is should be a compiler improvement, to be able to transform `v-model` on the `
` element with `open` and `@toggle`. - -# Drawbacks - -It might threoctially conflict if users managed to implement a nodeTransformer on the user land to support `v-model` on `
`. 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 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..64f5b0d1 --- /dev/null +++ b/active-rfcs/0000-v-model-details-dialog.md @@ -0,0 +1,82 @@ +- Start Date: 2023-04-07 +- Target Major Version: 3.x +- Reference Issues: (fill in existing related issues, if any) +- Implementation PR: (leave this empty) + +# Summary + +Support built-in `v-model` binding for the native [`
` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) and [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog). + +# Basic example + +```html + + + +``` + +When toggling the `
` or `` 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 `
` and ``, `v-model` will throw and users would need to bind manually. Which could be a bit counterintuitive. + +For now, users would need to manually bind them as: + +```html + + + +``` + +[SFC Playground](https://play.vuejs.org/#eNplUDtPwzAQ/iuHhVRYkj1KoyKxMTDA6MWkl9TCL9mXIhTlv+NHmhZ1sr677+Wb2Ytz1XlC1rA29F46goA0uY4bqZ31BDN4HGCBwVsNu0jdccNNb02I1JP9gX0iPA1CBXzmpq2LTTSIgFA7JQgjAmi/JiJr4NAr2X/vOVvlD+nlLHMAPu04KmxgntN4WbKyLtJMyYMjkpAqQGMdmtWKMzhQVl+9H/GMhioSfkSqEnkLasOktfC/3Ud5Y/N1cNk7YbrXEhSXCZUya/hNGymUHe/K9MqGmy75RNf4wXoNGulkj5FTLLbtdq3u/e3f71N+Ul6qZFkEbb3dmi1/qxufeg==) + +# Detailed design + +This is should be a compiler improvement, to be able to transform `v-model` on the `
` and `` 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 `
` or ``. 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 From de47adbe330e77c931dc09fe7276b27bd0651af4 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sat, 8 Apr 2023 13:02:15 +0200 Subject: [PATCH 3/3] chore: update --- active-rfcs/0000-v-model-details-dialog.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/active-rfcs/0000-v-model-details-dialog.md b/active-rfcs/0000-v-model-details-dialog.md index 64f5b0d1..84632ea2 100644 --- a/active-rfcs/0000-v-model-details-dialog.md +++ b/active-rfcs/0000-v-model-details-dialog.md @@ -1,7 +1,7 @@ - Start Date: 2023-04-07 - Target Major Version: 3.x - Reference Issues: (fill in existing related issues, if any) -- Implementation PR: (leave this empty) +- Implementation PR: https://github.com/vuejs/core/pull/8048 # Summary @@ -30,12 +30,14 @@ const show = ref(false) ``` -When toggling the `
` or `` element, the value of `show` should be reflected. Or once `show` has been modified, the details should expand/collapse automatically. +When toggling the `
` or `` 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 `
` and ``, `v-model` will throw and users would need to bind manually. Which could be a bit counterintuitive. +Since `
` and `` are native elements, it makes sense to have built-in support for them. + For now, users would need to manually bind them as: ```html @@ -59,7 +61,8 @@ const show = ref(false) ``` -[SFC Playground](https://play.vuejs.org/#eNplUDtPwzAQ/iuHhVRYkj1KoyKxMTDA6MWkl9TCL9mXIhTlv+NHmhZ1sr677+Wb2Ytz1XlC1rA29F46goA0uY4bqZ31BDN4HGCBwVsNu0jdccNNb02I1JP9gX0iPA1CBXzmpq2LTTSIgFA7JQgjAmi/JiJr4NAr2X/vOVvlD+nlLHMAPu04KmxgntN4WbKyLtJMyYMjkpAqQGMdmtWKMzhQVl+9H/GMhioSfkSqEnkLasOktfC/3Ud5Y/N1cNk7YbrXEhSXCZUya/hNGymUHe/K9MqGmy75RNf4wXoNGulkj5FTLLbtdq3u/e3f71N+Ul6qZFkEbb3dmi1/qxufeg==) +- [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