From a67d3cc34fcee9324acc5082cdfffe8338e974c1 Mon Sep 17 00:00:00 2001
From: Shehab Rahal <shehabrahal1@gmail.com>
Date: Thu, 4 Jan 2024 10:39:43 +0800
Subject: [PATCH] fix: temporary fix for WithinForm stories

---
 packages/components/checkbox/src/stories/WithinForm.vue     | 5 ++++-
 .../checkbox/tests/__snapshots__/checkbox.test.ts.snap      | 6 +++---
 packages/components/switch/src/stories/WithinForm.vue       | 5 ++++-
 .../switch/tests/__snapshots__/switch.test.ts.snap          | 3 +--
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/components/checkbox/src/stories/WithinForm.vue b/packages/components/checkbox/src/stories/WithinForm.vue
index 595e134d7..794d93aa4 100644
--- a/packages/components/checkbox/src/stories/WithinForm.vue
+++ b/packages/components/checkbox/src/stories/WithinForm.vue
@@ -10,6 +10,7 @@ const checked = ref<boolean | 'indeterminate'>('indeterminate')
   <form
     @submit="(event) => event.preventDefault()"
     @change="(event) => {
+      // TODO: this does not work since the `bubble-input` does not bubble checked change to parents, so we used v-model instated.
       const input = event.target as HTMLInputElement
       data = { ...data, [input.name]: input.checked }
     }"
@@ -18,6 +19,7 @@ const checked = ref<boolean | 'indeterminate'>('indeterminate')
       <legend>optional checked: {{ String(data.optional) }}</legend>
       <label>
         <OkuCheckbox
+          v-model="data.optional"
           class="checkbox"
           name="optional"
           :checked="checked"
@@ -43,7 +45,7 @@ const checked = ref<boolean | 'indeterminate'>('indeterminate')
 
     <fieldset>
       <legend>required checked: {{ String(data.required) }}</legend>
-      <OkuCheckbox class="checkbox" name="required" required>
+      <OkuCheckbox v-model="data.required" class="checkbox" name="required" required>
         <OkuCheckboxIndicator class="checkbox-indicator" />
       </OkuCheckbox>
     </fieldset>
@@ -54,6 +56,7 @@ const checked = ref<boolean | 'indeterminate'>('indeterminate')
     <fieldset>
       <legend>stop propagation checked: {{ String(data.stopprop) }}</legend>
       <OkuCheckbox
+        v-model="data.stopprop"
         class="checkbox"
         name="stopprop"
         @click="(event) => event.stopPropagation()"
diff --git a/packages/components/checkbox/tests/__snapshots__/checkbox.test.ts.snap b/packages/components/checkbox/tests/__snapshots__/checkbox.test.ts.snap
index 34ab219eb..04d00f103 100644
--- a/packages/components/checkbox/tests/__snapshots__/checkbox.test.ts.snap
+++ b/packages/components/checkbox/tests/__snapshots__/checkbox.test.ts.snap
@@ -90,16 +90,16 @@ exports[`okuCheckbox Stories > withinForm > should render correctly 1`] = `
 "<form>
   <fieldset>
     <legend>optional checked: false</legend><label>
-      <oku-checkbox-stub name="optional" checked="indeterminate" required="false" disabled="false" aschild="false" class="checkbox" value="on"></oku-checkbox-stub> with label
+      <oku-checkbox-stub name="optional" modelvalue="false" checked="indeterminate" required="false" disabled="false" aschild="false" class="checkbox" value="on"></oku-checkbox-stub> with label
     </label><br><br><button type="button"> Toggle indeterminate </button>
   </fieldset><br><br>
   <fieldset>
     <legend>required checked: false</legend>
-    <oku-checkbox-stub name="required" required="true" disabled="false" aschild="false" class="checkbox" value="on"></oku-checkbox-stub>
+    <oku-checkbox-stub name="required" modelvalue="false" required="true" disabled="false" aschild="false" class="checkbox" value="on"></oku-checkbox-stub>
   </fieldset><br><br>
   <fieldset>
     <legend>stop propagation checked: false</legend>
-    <oku-checkbox-stub name="stopprop" required="false" disabled="false" aschild="false" class="checkbox" value="on"></oku-checkbox-stub>
+    <oku-checkbox-stub name="stopprop" modelvalue="false" required="false" disabled="false" aschild="false" class="checkbox" value="on"></oku-checkbox-stub>
   </fieldset><br><br><button type="reset"> Reset </button><button>Submit</button>
 </form>"
 `;
diff --git a/packages/components/switch/src/stories/WithinForm.vue b/packages/components/switch/src/stories/WithinForm.vue
index e1e035bf1..8c051e84e 100644
--- a/packages/components/switch/src/stories/WithinForm.vue
+++ b/packages/components/switch/src/stories/WithinForm.vue
@@ -10,6 +10,7 @@ const checked = ref<boolean>(false)
   <form
     @submit="(event) => event.preventDefault()"
     @change="(event) => {
+      // TODO: this does not work since the `bubble-input` does not bubble checked change to parents, so we used v-model instated.
       const input = event.target as HTMLInputElement
       data = { ...data, [input.name]: input.checked }
     }"
@@ -18,6 +19,7 @@ const checked = ref<boolean>(false)
       <legend>optional checked: {{ String(data.optional) }}</legend>
       <label>
         <OkuSwitch
+          v-model="data.optional"
           class="switch"
           name="optional"
           :checked="checked"
@@ -34,7 +36,7 @@ const checked = ref<boolean>(false)
 
     <fieldset>
       <legend>required checked: {{ String(data.required) }}</legend>
-      <OkuSwitch class="switch" name="required" required>
+      <OkuSwitch v-model="data.required" class="switch" name="required" required>
         <OkuSwitchThumb class="switch-thumb" />
       </OkuSwitch>
     </fieldset>
@@ -45,6 +47,7 @@ const checked = ref<boolean>(false)
     <fieldset>
       <legend>stop propagation checked: {{ String(data.stopprop) }}</legend>
       <OkuSwitch
+        v-model="data.stopprop"
         class="switch"
         name="stopprop"
         @click="(event) => event.stopPropagation()"
diff --git a/packages/components/switch/tests/__snapshots__/switch.test.ts.snap b/packages/components/switch/tests/__snapshots__/switch.test.ts.snap
index e8157ee5c..504916bae 100644
--- a/packages/components/switch/tests/__snapshots__/switch.test.ts.snap
+++ b/packages/components/switch/tests/__snapshots__/switch.test.ts.snap
@@ -44,8 +44,7 @@ exports[`okuSwitch Stories > withinForm > should render correctly 1`] = `
 "<form>
   <fieldset>
     <legend>optional checked: false</legend><label>
-      <!-- v-model="data.optional" -->
-      <oku-switch-stub name="optional" checked="false" required="false" disabled="false" aschild="false" class="switch" value="on"></oku-switch-stub> with label
+      <oku-switch-stub name="optional" modelvalue="false" checked="false" required="false" disabled="false" aschild="false" class="switch" value="on"></oku-switch-stub> with label
     </label>
   </fieldset><br><br>
   <fieldset>