From f8c2df7c09a25f1cfbf5b1694215e05a84c8c470 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sat, 8 Apr 2023 12:55:36 +0200
Subject: [PATCH 1/3] feat: support `v-model` for `<details>` and `<dialog>`

---
 .../__snapshots__/vModel.spec.ts.snap         | 32 +++++++++++++++++
 .../__tests__/transforms/vModel.spec.ts       | 16 +++++++++
 packages/compiler-dom/src/runtimeHelpers.ts   |  4 +++
 .../compiler-dom/src/transforms/vModel.ts     | 10 +++++-
 .../compiler-ssr/__tests__/ssrElement.spec.ts | 20 +++++++++++
 .../compiler-ssr/src/transforms/ssrVModel.ts  |  2 ++
 packages/runtime-dom/src/directives/vModel.ts | 36 +++++++++++++++++++
 packages/runtime-dom/src/index.ts             |  2 ++
 8 files changed, 121 insertions(+), 1 deletion(-)

diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
index d2c9aaa785f..039d259b564 100644
--- a/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
@@ -127,6 +127,38 @@ return function render(_ctx, _cache) {
 }"
 `;
 
+exports[`compiler: transform v-model > simple expression for details 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { vModelDetails: _vModelDetails, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return _withDirectives((_openBlock(), _createElementBlock(\\"details\\", {
+      \\"onUpdate:modelValue\\": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+      [_vModelDetails, model]
+    ])
+  }
+}"
+`;
+
+exports[`compiler: transform v-model > simple expression for dialog 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { vModelDialog: _vModelDialog, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return _withDirectives((_openBlock(), _createElementBlock(\\"dialog\\", {
+      \\"onUpdate:modelValue\\": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+      [_vModelDialog, model]
+    ])
+  }
+}"
+`;
+
 exports[`compiler: transform v-model > simple expression for input (checkbox) 1`] = `
 "const _Vue = Vue
 
diff --git a/packages/compiler-dom/__tests__/transforms/vModel.spec.ts b/packages/compiler-dom/__tests__/transforms/vModel.spec.ts
index dce8f09b02c..2e43546bc89 100644
--- a/packages/compiler-dom/__tests__/transforms/vModel.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/vModel.spec.ts
@@ -9,6 +9,8 @@ import { transformElement } from '../../../compiler-core/src/transforms/transfor
 import { DOMErrorCodes } from '../../src/errors'
 import {
   V_MODEL_CHECKBOX,
+  V_MODEL_DETAILS,
+  V_MODEL_DIALOG,
   V_MODEL_DYNAMIC,
   V_MODEL_RADIO,
   V_MODEL_SELECT,
@@ -83,6 +85,20 @@ describe('compiler: transform v-model', () => {
     expect(generate(root).code).toMatchSnapshot()
   })
 
+  test('simple expression for details', () => {
+    const root = transformWithModel('<details v-model="model" />')
+
+    expect(root.helpers).toContain(V_MODEL_DETAILS)
+    expect(generate(root).code).toMatchSnapshot()
+  })
+
+  test('simple expression for dialog', () => {
+    const root = transformWithModel('<dialog v-model="model" />')
+
+    expect(root.helpers).toContain(V_MODEL_DIALOG)
+    expect(generate(root).code).toMatchSnapshot()
+  })
+
   test('simple expression for textarea', () => {
     const root = transformWithModel('<textarea v-model="model" />')
 
diff --git a/packages/compiler-dom/src/runtimeHelpers.ts b/packages/compiler-dom/src/runtimeHelpers.ts
index 19c595ef69a..d28b7b57447 100644
--- a/packages/compiler-dom/src/runtimeHelpers.ts
+++ b/packages/compiler-dom/src/runtimeHelpers.ts
@@ -4,6 +4,8 @@ export const V_MODEL_RADIO = Symbol(__DEV__ ? `vModelRadio` : ``)
 export const V_MODEL_CHECKBOX = Symbol(__DEV__ ? `vModelCheckbox` : ``)
 export const V_MODEL_TEXT = Symbol(__DEV__ ? `vModelText` : ``)
 export const V_MODEL_SELECT = Symbol(__DEV__ ? `vModelSelect` : ``)
+export const V_MODEL_DIALOG = Symbol(__DEV__ ? `vModelDialog` : ``)
+export const V_MODEL_DETAILS = Symbol(__DEV__ ? `vModelDetails` : ``)
 export const V_MODEL_DYNAMIC = Symbol(__DEV__ ? `vModelDynamic` : ``)
 
 export const V_ON_WITH_MODIFIERS = Symbol(__DEV__ ? `vOnModifiersGuard` : ``)
@@ -19,6 +21,8 @@ registerRuntimeHelpers({
   [V_MODEL_CHECKBOX]: `vModelCheckbox`,
   [V_MODEL_TEXT]: `vModelText`,
   [V_MODEL_SELECT]: `vModelSelect`,
+  [V_MODEL_DETAILS]: `vModelDetails`,
+  [V_MODEL_DIALOG]: `vModelDialog`,
   [V_MODEL_DYNAMIC]: `vModelDynamic`,
   [V_ON_WITH_MODIFIERS]: `withModifiers`,
   [V_ON_WITH_KEYS]: `withKeys`,
diff --git a/packages/compiler-dom/src/transforms/vModel.ts b/packages/compiler-dom/src/transforms/vModel.ts
index 5dff390d3d8..cbe9784a09a 100644
--- a/packages/compiler-dom/src/transforms/vModel.ts
+++ b/packages/compiler-dom/src/transforms/vModel.ts
@@ -12,7 +12,9 @@ import {
   V_MODEL_RADIO,
   V_MODEL_SELECT,
   V_MODEL_TEXT,
-  V_MODEL_DYNAMIC
+  V_MODEL_DYNAMIC,
+  V_MODEL_DETAILS,
+  V_MODEL_DIALOG
 } from '../runtimeHelpers'
 
 export const transformModel: DirectiveTransform = (dir, node, context) => {
@@ -49,6 +51,8 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
     tag === 'input' ||
     tag === 'textarea' ||
     tag === 'select' ||
+    tag === 'details' ||
+    tag === 'dialog' ||
     isCustomElement
   ) {
     let directiveToUse = V_MODEL_TEXT
@@ -92,6 +96,10 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
       }
     } else if (tag === 'select') {
       directiveToUse = V_MODEL_SELECT
+    } else if (tag === 'dialog') {
+      directiveToUse = V_MODEL_DIALOG
+    } else if (tag === 'details') {
+      directiveToUse = V_MODEL_DETAILS
     } else {
       // textarea
       __DEV__ && checkDuplicatedValue()
diff --git a/packages/compiler-ssr/__tests__/ssrElement.spec.ts b/packages/compiler-ssr/__tests__/ssrElement.spec.ts
index 65608bdd342..c34a3d316fa 100644
--- a/packages/compiler-ssr/__tests__/ssrElement.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrElement.spec.ts
@@ -340,4 +340,24 @@ describe('ssr: element', () => {
       `)
     })
   })
+
+  describe('v-model', () => {
+    test('with details', () => {
+      expect(getCompiledString(`<details v-model="x">Foo</details>`))
+        .toMatchInlineSnapshot(`
+          "\`<details\${
+              (_ssrIncludeBooleanAttr(_ctx.x)) ? \\" open\\" : \\"\\"
+            }>Foo</details>\`"
+        `)
+    })
+
+    test('with dialog', () => {
+      expect(getCompiledString(`<dialog v-model="x">Foo</dialog>`))
+        .toMatchInlineSnapshot(`
+          "\`<dialog\${
+              (_ssrIncludeBooleanAttr(_ctx.x)) ? \\" open\\" : \\"\\"
+            }>Foo</dialog>\`"
+        `)
+    })
+  })
 })
diff --git a/packages/compiler-ssr/src/transforms/ssrVModel.ts b/packages/compiler-ssr/src/transforms/ssrVModel.ts
index bd587edcb9c..838edc232ab 100644
--- a/packages/compiler-ssr/src/transforms/ssrVModel.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVModel.ts
@@ -129,6 +129,8 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
     } else if (node.tag === 'textarea') {
       checkDuplicatedValue()
       node.children = [createInterpolation(model, model.loc)]
+    } else if (node.tag === 'dialog' || node.tag === 'details') {
+      res.props = [createObjectProperty(`open`, model)]
     } else if (node.tag === 'select') {
       node.children.forEach(option => {
         if (option.type === NodeTypes.ELEMENT) {
diff --git a/packages/runtime-dom/src/directives/vModel.ts b/packages/runtime-dom/src/directives/vModel.ts
index 2cf5f4cfc16..056ccfb6f03 100644
--- a/packages/runtime-dom/src/directives/vModel.ts
+++ b/packages/runtime-dom/src/directives/vModel.ts
@@ -210,6 +210,42 @@ export const vModelSelect: ModelDirective<HTMLSelectElement> = {
   }
 }
 
+export const vModelDetails: ModelDirective<HTMLDetailsElement> = {
+  created(el, _, vnode) {
+    addEventListener(el, 'toggle', () => {
+      el._assign(el.open)
+    })
+    el._assign = getModelAssigner(vnode)
+  },
+  mounted(el, { value }) {
+    el.open = value
+  },
+  beforeUpdate(el, _binding, vnode) {
+    el._assign = getModelAssigner(vnode)
+  },
+  updated(el, { value }) {
+    el.open = value
+  }
+}
+
+export const vModelDialog: ModelDirective<HTMLDialogElement> = {
+  created(el, _, vnode) {
+    addEventListener(el, 'close', () => {
+      el._assign(false)
+    })
+    el._assign = getModelAssigner(vnode)
+  },
+  mounted(el, { value }) {
+    el.open = value
+  },
+  beforeUpdate(el, _binding, vnode) {
+    el._assign = getModelAssigner(vnode)
+  },
+  updated(el, { value }) {
+    el.open = value
+  }
+}
+
 function setSelected(el: HTMLSelectElement, value: any) {
   const isMultiple = el.multiple
   if (isMultiple && !isArray(value) && !isSet(value)) {
diff --git a/packages/runtime-dom/src/index.ts b/packages/runtime-dom/src/index.ts
index ad818a34bb7..536cf1e8345 100644
--- a/packages/runtime-dom/src/index.ts
+++ b/packages/runtime-dom/src/index.ts
@@ -226,6 +226,8 @@ export {
   vModelCheckbox,
   vModelRadio,
   vModelSelect,
+  vModelDetails,
+  vModelDialog,
   vModelDynamic
 } from './directives/vModel'
 export { withModifiers, withKeys } from './directives/vOn'

From d0b87d9ed304adb00efd26f535b639e03c58d60b Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 10 Apr 2023 11:24:20 +0200
Subject: [PATCH 2/3] test: add more test

---
 .../compiler-ssr/src/transforms/ssrVModel.ts  |  2 +-
 .../__tests__/directives/vModel.spec.ts       | 82 ++++++++++++++++++-
 packages/runtime-dom/src/directives/vModel.ts | 10 ++-
 3 files changed, 88 insertions(+), 6 deletions(-)

diff --git a/packages/compiler-ssr/src/transforms/ssrVModel.ts b/packages/compiler-ssr/src/transforms/ssrVModel.ts
index 838edc232ab..ed98042ea43 100644
--- a/packages/compiler-ssr/src/transforms/ssrVModel.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVModel.ts
@@ -130,7 +130,7 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
       checkDuplicatedValue()
       node.children = [createInterpolation(model, model.loc)]
     } else if (node.tag === 'dialog' || node.tag === 'details') {
-      res.props = [createObjectProperty(`open`, model)]
+      res.props = [createObjectProperty('open', model)]
     } else if (node.tag === 'select') {
       node.children.forEach(option => {
         if (option.type === NodeTypes.ELEMENT) {
diff --git a/packages/runtime-dom/__tests__/directives/vModel.spec.ts b/packages/runtime-dom/__tests__/directives/vModel.spec.ts
index 73b8f18afc0..9cedb6d00c8 100644
--- a/packages/runtime-dom/__tests__/directives/vModel.spec.ts
+++ b/packages/runtime-dom/__tests__/directives/vModel.spec.ts
@@ -9,8 +9,8 @@ import {
   ref
 } from '@vue/runtime-dom'
 
-const triggerEvent = (type: string, el: Element) => {
-  const event = new Event(type)
+const triggerEvent = (type: string, el: Element, arg?: any) => {
+  const event = new Event(type, arg)
   el.dispatchEvent(event)
 }
 
@@ -1172,4 +1172,82 @@ describe('vModel', () => {
     await nextTick()
     expect(data.value).toEqual('使用拼音输入')
   })
+
+  it('should work with details', async () => {
+    const manualListener = vi.fn()
+    const component = defineComponent({
+      data() {
+        return { value: false }
+      },
+      render() {
+        return [
+          withVModel(
+            h('details', {
+              'onUpdate:modelValue': setValue.bind(this),
+              onToggle: () => {
+                manualListener(data.value)
+              }
+            }),
+            this.value
+          )
+        ]
+      }
+    })
+    render(h(component), root)
+
+    const details = root.querySelector('details')! as HTMLDetailsElement
+    const data = root._vnode.component.data
+    expect(details.open).toEqual(false)
+
+    details.open = true
+    triggerEvent('toggle', details, { target: details })
+    await nextTick()
+    expect(data.value).toEqual(true)
+    expect(manualListener).toHaveBeenCalledWith(true)
+
+    data.value = false
+    await nextTick()
+    expect(details.open).toEqual(false)
+
+    data.value = true
+    await nextTick()
+    expect(details.open).toEqual(true)
+  })
+
+  it('should work with dialog', async () => {
+    const manualListener = vi.fn()
+    const component = defineComponent({
+      data() {
+        return { value: false }
+      },
+      render() {
+        return [
+          withVModel(
+            h('dialog', {
+              'onUpdate:modelValue': setValue.bind(this),
+              onClose: () => {
+                manualListener(data.value)
+              }
+            }),
+            this.value
+          )
+        ]
+      }
+    })
+    render(h(component), root)
+
+    const dialog = root.querySelector('dialog')! as HTMLDialogElement
+    const data = root._vnode.component.data
+    expect(dialog.open).toEqual(false)
+
+    data.value = true
+    await nextTick()
+    expect(dialog.open).toEqual(true)
+
+    dialog.open = false
+    triggerEvent('close', dialog)
+    await nextTick()
+    expect(data.value).toEqual(false)
+    expect(manualListener).toHaveBeenCalledWith(false)
+  })
 })
diff --git a/packages/runtime-dom/src/directives/vModel.ts b/packages/runtime-dom/src/directives/vModel.ts
index 056ccfb6f03..b37ebd266d6 100644
--- a/packages/runtime-dom/src/directives/vModel.ts
+++ b/packages/runtime-dom/src/directives/vModel.ts
@@ -212,15 +212,15 @@ export const vModelSelect: ModelDirective<HTMLSelectElement> = {
 
 export const vModelDetails: ModelDirective<HTMLDetailsElement> = {
   created(el, _, vnode) {
+    el._assign = getModelAssigner(vnode)
     addEventListener(el, 'toggle', () => {
       el._assign(el.open)
     })
-    el._assign = getModelAssigner(vnode)
   },
   mounted(el, { value }) {
     el.open = value
   },
-  beforeUpdate(el, _binding, vnode) {
+  beforeUpdate(el, _, vnode) {
     el._assign = getModelAssigner(vnode)
   },
   updated(el, { value }) {
@@ -238,7 +238,7 @@ export const vModelDialog: ModelDirective<HTMLDialogElement> = {
   mounted(el, { value }) {
     el.open = value
   },
-  beforeUpdate(el, _binding, vnode) {
+  beforeUpdate(el, _, vnode) {
     el._assign = getModelAssigner(vnode)
   },
   updated(el, { value }) {
@@ -314,6 +314,10 @@ function resolveDynamicModel(tagName: string, type: string | undefined) {
       return vModelSelect
     case 'TEXTAREA':
       return vModelText
+    case 'DETAILS':
+      return vModelDetails
+    case 'DIALOG':
+      return vModelDialog
     default:
       switch (type) {
         case 'checkbox':

From eb5ca19fce93ce8e79f0386bbce6504105b5f2b5 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 10 Apr 2023 11:27:00 +0200
Subject: [PATCH 3/3] chore: update

---
 packages/runtime-dom/src/directives/vModel.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/runtime-dom/src/directives/vModel.ts b/packages/runtime-dom/src/directives/vModel.ts
index b37ebd266d6..c7b88b78a35 100644
--- a/packages/runtime-dom/src/directives/vModel.ts
+++ b/packages/runtime-dom/src/directives/vModel.ts
@@ -230,10 +230,10 @@ export const vModelDetails: ModelDirective<HTMLDetailsElement> = {
 
 export const vModelDialog: ModelDirective<HTMLDialogElement> = {
   created(el, _, vnode) {
+    el._assign = getModelAssigner(vnode)
     addEventListener(el, 'close', () => {
       el._assign(false)
     })
-    el._assign = getModelAssigner(vnode)
   },
   mounted(el, { value }) {
     el.open = value