From bee763231624d748eb4019e69515dab1ff09ff39 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sat, 8 Apr 2023 13:16:46 +0200
Subject: [PATCH] docs: support `v-model` for `dialog` and `details`

---
 src/api/built-in-directives.md |  2 +
 src/guide/essentials/forms.md  | 74 +++++++++++++++++++++++++++++++++-
 2 files changed, 74 insertions(+), 2 deletions(-)

diff --git a/src/api/built-in-directives.md b/src/api/built-in-directives.md
index e08c0cfc69..fedf954372 100644
--- a/src/api/built-in-directives.md
+++ b/src/api/built-in-directives.md
@@ -351,6 +351,8 @@ Create a two-way binding on a form input element or a component.
   - `<input>`
   - `<select>`
   - `<textarea>`
+  - `<details>`
+  - `<dialog>`
   - components
 
 - **Modifiers:**
diff --git a/src/guide/essentials/forms.md b/src/guide/essentials/forms.md
index 14a0395671..6e41e902c8 100644
--- a/src/guide/essentials/forms.md
+++ b/src/guide/essentials/forms.md
@@ -11,6 +11,8 @@ const checkedNames = ref([])
 const picked = ref('')
 const selected = ref('')
 const multiSelected = ref([])
+const detailsOpen = ref(false)
+const dialogOpen = ref(false)
 </script>
 
 # Form Input Bindings {#form-input-bindings}
@@ -266,8 +268,6 @@ Single select:
 
 [Try it in the Playground](https://play.vuejs.org/#eNp1j1ELgyAUhf/KxZe2h633cEHbHxjstReXdxCYSt5iEP333XIJPQSinuN3jjqJyvvrOKAohAxN33oqa4tf73oCjR81GIKptgBakTqd4x6gRxp6uymAgAYbQl1AlkVvXhaeeMg8NbMg7LxRhKwAZPDKlvBK8WlKXTDPnFzOI7naMF46p9HcarFxtVgBRpyn1lnQbVBvwwWjMgMyycTToAr47wZnUeaR3mfL6sC/H/iPnc/vXS9gIfP0UTH/ACgWeYE=)
 
-</div>
-
 :::tip Note
 If the initial value of your `v-model` expression does not match any of the options, the `<select>` element will render in an "unselected" state. On iOS this will cause the user not being able to select the first item because iOS does not fire a change event in this case. It is therefore recommended to provide a disabled option with an empty value, as demonstrated in the example above.
 :::
@@ -360,6 +360,76 @@ export default {
 
 </div>
 
+### Details {#details}
+
+```vue-html
+<div>Open: {{ open }}</div>
+
+<details v-model="open">
+  <summary>This is summary</summary>
+  <p>And this is more detailed explanation.</p>
+</details>
+```
+
+<div class="demo">
+  <div>Open: {{ detailsOpen }}</div>
+
+  <details v-model="detailsOpen">
+    <summary>This is summary</summary>
+    <p>And this is more detailed explanation.</p>
+  </details>
+</div>
+
+<div class="composition-api">
+
+[Try it in the Playground](https://play.vuejs.org/#eNo9j8EKwjAMhl8l9KIetHepA5/Ai8deypZhYU1Lmw1l7N1NXRFy+ZPv/5Os6p7SZZlRXZUpffaJoSDPqbPkQ4qZYYWMI2ww5hjgIOjBkqU+UmGICQluFTiObip4smT0HiMBIhhDmhyjKAAz+KV7iOUK67p7t83o2q1wBZCdnwos5xAHnG5WVcqqn13mZQ7B5U/3fPkCUk3LzjZoXOruNAA3KsSMsEfjAPiWi8ixj3Qxuj4qBt02izL6f7Tavi1xZNY=)
+
+</div>
+<div class="options-api">
+
+[Try it in the Playground](https://play.vuejs.org/#eNo9T8uuAjEI/RXS1b0L7d7USfwCNy5nQyzGJn2lZSaayfy7dKaaEODA4QCLuuR8nCdSJ2XqvbjMwxjplVNhsPTAyTMsYwSwyPj3v+cAhXgq8YsAUqZ4ggf6SntpbUGcmNE/YQFMIXtkEgRgrJuH6za7LJsIrKvRrdrIjUCMzleYDyFZ8udRNdaotnHp1ykELO/h9nQVxDqWnb3ReXm4RAvcWSEVkveaNFmQdz1GZJfi0ei8X6b7ZkFG/45W6wc1S2it)
+
+</div>
+
+### Dialog {#dialog}
+
+```vue-html
+<button @click="open = !open">
+  Open: {{ open }}
+</button>
+
+<dialog v-model="open">
+  <form type="dialog">
+    <p>Dialog content</p>
+    <button type="submit">OK</button>
+  </form>
+</dialog>
+```
+
+<div class="demo">
+  <button @click="dialogOpen = !dialogOpen">
+    Open: {{ dialogOpen }}
+  </button>
+
+  <dialog v-model="dialogOpen">
+    <form type="dialog">
+      <p>Dialog content</p>
+      <button type="submit">OK</button>
+    </form>
+  </dialog>
+</div>
+
+<div class="composition-api">
+
+[Try it in the Playground](https://play.vuejs.org/#eNpNj81qwzAQhF9lq0vaQ6t7UEILveWQF9DFcdZBRD+LtA4E43fP2hImJzHMzKedSf0R/TxGVHtlSp8dMRTkkY42ukApM0yQcYAZhpwC7CS6s9HGPsXCkAgjHJbA59D5gl82Gl0xAhDBGMh3jKIAzGVkThF+e+/6+8GqVv9YXqvWDMBZxB6mqcLneW3qWl2hIq+u8+kGj++QrugbaSOYIeUA/CQUp0Y3T1w6/te6bGCMbPSytpntxFYu4yU4lvL59HbCGtTLJ3WWrn+IMHobrOYXGf10wg==)
+
+</div>
+<div class="options-api">
+
+[Try it in the Playground](https://play.vuejs.org/#eNpNT0FuwyAQ/MqUU3touUckaqXeesgHfCH2urKKAeElamX5712D40RCLMPszOzO6iPGt2smdVBmatMQ+dR4+o0hMTrqbXaMufFAZ9k+v9Q3kIhz8jcEhEj+gN66ierXsha55Bi9GwtgGqOzTIIAc8nMweO9dUP7c2zU6oMjntbaqNIDnIv5PJcULMXa6CotpgK7wbrwjevrGDpym9PuYPqQRvBfJGFq684JG0+fVd4Gz+TZ6HgntxE38ZQv48AiPn89jFAa9RpS19I1Q4DR+8Jq+QcISniZ)
+
+</div>
+
 ## Value Bindings {#value-bindings}
 
 For radio, checkbox and select options, the `v-model` binding values are usually static strings (or booleans for checkbox):