Skip to content

Commit

Permalink
fix: temporary fix for WithinForm stories
Browse files Browse the repository at this point in the history
  • Loading branch information
Cr0zy07 committed Jan 4, 2024
1 parent 31ca72d commit a67d3cc
Show file tree
Hide file tree
Showing 4 changed files with 12 additions and 7 deletions.
5 changes: 4 additions & 1 deletion packages/components/checkbox/src/stories/WithinForm.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
}"
Expand All @@ -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"
Expand All @@ -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>
Expand All @@ -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()"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>"
`;
5 changes: 4 additions & 1 deletion packages/components/switch/src/stories/WithinForm.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
}"
Expand All @@ -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"
Expand All @@ -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>
Expand All @@ -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()"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit a67d3cc

Please sign in to comment.