docs: Fixed README.md

README.md

@@ -1,10 +1,14 @@
 ## What is Vue Formulario?
 
-Vue Formulario is a library, based on <a href="https://vueformulate.com">Vue Formulate</a>, that handles the core logic for working with forms and gives full control on the form presentation.
+Vue Formulario is a library, based on <a href="https://vueformulate.com">Vue Formulate</a>, that handles the core logic
+for working with forms and gives full control on the form presentation.
 
 ## Examples
 
-Every form control have to rendered inside FormularioInput component. This component provides `id` and `context` in v-slot props. Control should use `context.model` as v-model and `context.blurHandler` as handler for `blur` event (it is necessary for validation when property `errorBehavior` is `blur`). Errors object list for field can be accessed through `context.allErrors`. Each error is an object with fields message (translated message), rule (rule name) and context.
+Every form control have to rendered inside FormularioInput component. This component provides `id` and `context` in
+v-slot props. Control should use `context.model` as v-model and `context.runValidation` as handler for `blur` event
+(it is necessary for validation when property `validationBehavior` is `demand`). Errors list for a field can be
+accessed through `context.allErrors`.
 
 The example below creates the authorization form from data:
 ```json
@@ -12,9 +16,9 @@ The example below creates the authorization form from data:
     "username": "",
     "password": "",
     "options": {
-            "anonym": false,
+        "anonymous": false,
         "tags": ["test"]
-        },
+    }
 }
 ```
 
@@ -24,59 +28,59 @@ The example below creates the authorization form from data:
     name="formName"
 >
     <FormularioInput
-            v-slot="vSlot"
+        v-slot="{ context }"
         name="username"
         validation="required|email"
-            error-behavior="live"
+        validation-behavior="live"
     >
         <input
-                v-model="vSlot.context.model"
+            v-model="context.model"
             type="text"
-                @blur="vSlot.context.blurHandler"
+            @blur="context.runValidation"
         >
-            <div v-if="vSlot.context.showValidationErrors">
+        <div v-if="context.allErrors.length > 0">
             <span
-                    v-for="(error, index) in vSlot.context.allErrors"
+                v-for="(error, index) in context.allErrors"
                 :key="index"
             >
-                    {{ error.message }}
+                {{ error }}
             </span>
         </div>
     </FormularioInput>
 
     <FormularioInput
-            v-slot="vSlot"
+        v-slot="{ context }"
         name="password"
         validation="required|min:4,length"
     >
         <input
-                v-model="vSlot.context.model"
+            v-model="context.model"
             type="password"
         >
     </FormularioInput>
 
     <FormularioGrouping name="options">
         <FormularioInput
-                v-slot="vSlot"
-                name="anonym"
+            v-slot="{ context }"
+            name="anonymous"
         >
             <div>
                 <input
-                        :id="vSlot.id"
-                        v-model="vSlot.context.model"
+                    id="options-anonymous"
+                    v-model="context.model"
                     type="checkbox"
                 >
-                    <label :for="vSlot.id">As anonym</label>
+                <label for="options-anonymous">As anonymous</label>
             </div>
         </FormularioInput>
     </FormularioGrouping>
 
     <FormularioInput
-            v-slot="vSlot"
+        v-slot="{ context }"
         name="options.tags[0]"
     >
         <input
-                v-model="vSlot.context.model"
+            v-model="context.model"
             type="text"
         >
     </FormularioInput>