From 184d72e7473f28f23257c0ca58088029c70f47ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sat, 10 Feb 2024 16:15:23 +0800
Subject: [PATCH] feat(runtime-vapor): implement vModelRadio

Fully supported v-model for native elements.
---
 README.md                                       |  3 +--
 packages/runtime-vapor/src/directives/vModel.ts | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index f302a3fc5..25a5ada78 100644
--- a/README.md
+++ b/README.md
@@ -42,8 +42,7 @@ PR are welcome!
     - [x] modifiers
   - [x] runtime directives
   - [ ] `v-memo` [on hold]
-  - [ ] `v-model`
-    - [x] text field
+  - [x] `v-model`
   - [x] `v-if` / `v-else` / `v-else-if`
   - [ ] `v-for`
     - [x] basic
diff --git a/packages/runtime-vapor/src/directives/vModel.ts b/packages/runtime-vapor/src/directives/vModel.ts
index b5acb8803..4e940285c 100644
--- a/packages/runtime-vapor/src/directives/vModel.ts
+++ b/packages/runtime-vapor/src/directives/vModel.ts
@@ -115,8 +115,21 @@ export const vModelText: ObjectDirective<
   },
 }
 
-// TODO
-export const vModelRadio = {}
+export const vModelRadio: ObjectDirective<HTMLInputElement> = {
+  beforeMount(el, { value, instance }) {
+    el.checked = looseEqual(value, getValue(el, instance))
+    assignFnMap.set(el, getModelAssigner(el, instance))
+    addEventListener(el, 'change', () => {
+      assignFnMap.get(el)!(getValue(el, instance))
+    })
+  },
+  beforeUpdate(el, { value, oldValue, instance }) {
+    assignFnMap.set(el, getModelAssigner(el, instance))
+    if (value !== oldValue) {
+      el.checked = looseEqual(value, getValue(el, instance))
+    }
+  },
+}
 
 export const vModelSelect: ObjectDirective<HTMLSelectElement, any, 'number'> = {
   // <select multiple> value need to be deep traversed