From 88e89b63272a9c764fb4f9ec63c4174a026fd2c0 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 7 Apr 2023 11:05:31 +0200
Subject: [PATCH 1/3] feat: `v-model` on `<details>`

---
 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 [`<details>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details).
+
+# 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>
+</template>
+```
+
+When toggling the `<details>` 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>`, `v-model` will throw and users would need to bind maually. Which could be a bit counterintuitive. 
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const show = ref(false)
+</script>
+
+<template>
+  <details :open="show" @toggle="show = e.target.open">
+    <summary>Summary</summary>
+    <span>Details</span>
+  </details>
+</template>
+```
+
+# Detailed design
+
+This is should be a compiler improvement, to be able to transform `v-model` on the `<details>` 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 `<details>`. 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 <anthonyfu117@hotmail.com>
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 [`<details>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details).
-
-# 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>
-</template>
-```
-
-When toggling the `<details>` 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>`, `v-model` will throw and users would need to bind maually. Which could be a bit counterintuitive. 
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const show = ref(false)
-</script>
-
-<template>
-  <details :open="show" @toggle="show = e.target.open">
-    <summary>Summary</summary>
-    <span>Details</span>
-  </details>
-</template>
-```
-
-# Detailed design
-
-This is should be a compiler improvement, to be able to transform `v-model` on the `<details>` 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 `<details>`. 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 [`<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.
+
+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>
+```
+
+[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 `<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

From de47adbe330e77c931dc09fe7276b27bd0651af4 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
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)
 </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. 
+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
@@ -59,7 +61,8 @@ const show = ref(false)
 </template>
 ```
 
-[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