@volverjs/form-vue 0.0.1 → 0.0.2

package/README.md

@@ -73,10 +73,13 @@ A `valid` or `invalid` event is emitted when the form status changes.
   const onSubmit = (formData) => {
     // Do something with the form data
   }
+  const onInvalid = (errors) => {
+    // Do something with the errors
+  }
 </script>
 
 <template>
-  <VvForm @submit="onSubmit">
+  <VvForm @submit="onSubmit" @invalid="onInvalid">
     <!-- form fields -->
     <button type="submit">Submit</button>
   </VvForm>
@@ -87,7 +90,10 @@ The submit can be triggered programmatically with the `submit()` method.
 
 ```vue
 <script lang="ts" setup>
-  const formEl = ref(null)
+  import { ref } from 'vue'
+  import type { FormComponent } from '@volverjs/form-vue'
+
+  const formEl = ref<InstanceType<FormComponent>>(null)
   const onSubmit = (formData) => {
     // Do something with the form data
   }
@@ -121,7 +127,6 @@ The throttle can be changed with the `updateThrottle` option.
 <template>
   <VvForm v-model="formData">
     <!-- form fields -->
-    <button type="submit">Submit</button>
   </VvForm>
 </template>
 ```
@@ -134,13 +139,13 @@ The wrapper status is invalid if at least one of the fields inside it is invalid
 ```vue
 <template>
   <VvForm>
-    <VvFormWrapper #default="{ invalid }">
+    <VvFormWrapper v-slot="{ invalid }">
       <div class="form-section-1">
         <span v-if="invalid">There is a validation error</span>
         <!-- form fields of section 1 -->
       </div>
     </VvFormWrapper>
-    <VvFormWrapper #default="{ invalid }">
+    <VvFormWrapper v-slot="{ invalid }">
       <div class="form-section-2">
         <span v-if="invalid">There is a validation error</span>
         <!-- form fields of the section 2 -->
@@ -150,6 +155,27 @@ The wrapper status is invalid if at least one of the fields inside it is invalid
 </template>
 ```
 
+`VvFormWrapper` can be used recursively to create a validation tree. The wrapper status is invalid if at least one of the fields inside it or one of its children is invalid.
+
+```vue
+<template>
+  <VvForm>
+    <VvFormWrapper v-slot="{ invalid }">
+      <div class="form-section">
+        <span v-if="invalid">There is a validation error</span>
+        <!-- form fields of section -->
+        <VvFormWrapper v-slot="{ invalid: groupInvalid }">
+          <div class="form-section__group">
+            <span v-if="groupInvalid">There is a validation error</span>
+            <!-- form fields of the group -->
+          </div>
+        </VvFormWrapper>
+      </div>
+    </VvFormWrapper>
+  </VvForm>
+</template>
+```
+
 ### VvFormField
 
 `VvFormField` allow you to render a [`@volverjs/ui-vue`](https://github.com/volverjs/ui-vue) input component inside a form. It automatically bind the form data through the `name` attribute.
@@ -176,14 +202,13 @@ For nested objects, use the `name` attribute with dot notation.
 The type of input component is defined by the `type` attribute.
 All the available input types are listed in the [VvFormField documentation](/docs/VvFormField.md).
 
-You can also use the `VvFormField` component to render a default slot without .
+You can also use the `VvFormField` component to render a default slot without a `type` (default `type` is `custom`).
 
 ```vue
 <template>
   <VvForm>
     <VvFormField
-      name="name"
-      #default="{
+      v-slot="{
         modelValue,
         invalid,
         invalidLabel,
@@ -192,17 +217,18 @@ You can also use the `VvFormField` component to render a default slot without .
         erros,
         onUpdate
       }"
+      name="surname"
     >
-      <label for="name">Name</label>
+      <label for="surname">Surname</label>
       <input
-        id="name"
+        id="surname"
         type="text"
         :value="modelValue"
         :aria-invalid="invalid"
-        :aria-errormessage="invalid ? 'name-alert' : undefined"
+        :aria-errormessage="invalid ? 'surname-alert' : undefined"
         @input="onUpdate"
       />
-      <small v-if="invalid" role="alert" id="name-alert">
+      <small v-if="invalid" role="alert" id="surname-alert">
         {{ invalidLabel }}
       </small>
     </VvFormField>
@@ -219,7 +245,7 @@ Or a custom component.
 
 <template>
   <VvForm>
-    <VvFormField name="name" :is="MyInput" />
+    <VvFormField name="surname" :is="MyInput" />
   </VvForm>
 </template>
 ```
@@ -227,7 +253,7 @@ Or a custom component.
 ## Composable
 
 `useForm` can be used to create a form programmatically inside a Vue 3 Component.
-If the plugin is defined globally, the settings are inherited but can be customized.
+The default settings are inherited from the plugin (if it was defined).
 
 ```vue
 <script lang="ts" setup>
@@ -257,6 +283,7 @@ If the plugin is defined globally, the settings are inherited but can be customi
 ## Outside a Vue 3 Component
 
 `formFactory` can be used to create a form outside a Vue 3 Component.
+No settings are inherited.
 
 ```ts
 import { formFactory } from '@volverjs/form-vue'

package/dist/index.d.ts

@@ -1,5 +1,8 @@
 import { type InjectionKey, type Plugin } from 'vue';
 import type { AnyZodObject } from 'zod';
+import { defineFormField } from './VvFormField';
+import { defineForm } from './VvForm';
+import { defineFormWrapper } from './VvFormWrapper';
 import type { InjectedFormData, InjectedFormWrapperData, InjectedFormFieldData, FormComposableOptions, FormPluginOptions } from './types';
 export declare const formFactory: (schema: AnyZodObject, options?: FormComposableOptions) => {
     VvForm: import("vue").DefineComponent<{
@@ -119,4 +122,7 @@ export declare const useForm: (schema: AnyZodObject, options?: FormComposableOpt
 };
 export { FormFieldType } from './enums';
 export { defaultObjectBySchema } from './utils';
-export type { InjectedFormData, InjectedFormWrapperData, InjectedFormFieldData, FormComposableOptions, FormPluginOptions, };
+type FormComponent = ReturnType<typeof defineForm>;
+type FormWrapperComponent = ReturnType<typeof defineFormWrapper>;
+type FormFieldComponent = ReturnType<typeof defineFormField>;
+export type { InjectedFormData, InjectedFormWrapperData, InjectedFormFieldData, FormComposableOptions, FormPluginOptions, FormComponent, FormWrapperComponent, FormFieldComponent, };

package/package.json

@@ -19,7 +19,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/form-vue/issues"
   },
-  "version": "0.0.1",
+  "version": "0.0.2",
   "engines": {
     "node": ">= 16.x"
   },
@@ -34,8 +34,6 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@iconify/tools": "^2.2.6",
-    "@iconify/vue": "^4.1.0",
     "@volverjs/ui-vue": "0.0.5-beta.1",
     "@vueuse/core": "^9.13.0",
     "deepmerge": "^4.3.0",

package/src/index.ts

@@ -88,10 +88,17 @@ export const useForm = (
 export { FormFieldType } from './enums'
 export { defaultObjectBySchema } from './utils'
 
+type FormComponent = ReturnType<typeof defineForm>
+type FormWrapperComponent = ReturnType<typeof defineFormWrapper>
+type FormFieldComponent = ReturnType<typeof defineFormField>
+
 export type {
 	InjectedFormData,
 	InjectedFormWrapperData,
 	InjectedFormFieldData,
 	FormComposableOptions,
 	FormPluginOptions,
+	FormComponent,
+	FormWrapperComponent,
+	FormFieldComponent,
 }