feat(vue): field is now destructured from Field. TypeScript types are much more strict now

* fix(vue): Subscribe component default scoped slot types

* fix(vue): Field component default scoped slot value types

* example type fixes

* remove test log

* docs(vue): Field component slot fix

* refactor(vue): remove unused children property type from field component

* chore: fix formatting

---------

Co-authored-by: Corbin Crutchley <git@crutchcorn.dev>
This commit is contained in:
Robert Soriano
2023-09-08 14:41:54 -07:00
committed by GitHub
parent 790c1aa226
commit 6935b330fa
6 changed files with 62 additions and 38 deletions

View File

@@ -45,12 +45,14 @@ async function onChangeFirstName(value) {
:onChangeAsyncDebounceMs="500"
:onChangeAsync="onChangeFirstName"
>
<template v-slot="field, state">
<template v-slot="{ field, state }">
<label :htmlFor="field.name">First Name:</label>
<input
:name="field.name"
:value="field.state.value"
@input="(e) => field.handleChange(e.target.value)"
@input="
(e) => field.handleChange((e.target as HTMLInputElement).value)
"
@blur="field.handleBlur"
/>
<FieldInfo :state="state" />
@@ -59,12 +61,14 @@ async function onChangeFirstName(value) {
</div>
<div>
<form.Field name="lastName">
<template v-slot="field, state">
<template v-slot="{ field, state }">
<label :htmlFor="field.name">Last Name:</label>
<input
:name="field.name"
:value="field.state.value"
@input="(e) => field.handleChange(e.target.value)"
@input="
(e) => field.handleChange((e.target as HTMLInputElement).value)
"
@blur="field.handleBlur"
/>
<FieldInfo :state="state" />