vue-reactive-form - npm Package Compare versions

Comparing version 0.1.19 to 0.1.20

build/index.d.ts

 import * as vue from 'vue';
 import { ComputedRef, Ref } from 'vue';
-import { ValidationErrors as ValidationErrors$1 } from '@/interfaces/validator';
 
@@ -14,5 +13,6 @@ declare type AvailableType = boolean | number | string | Date | boolean[] | number[] | string[] | Date[];
 declare abstract class AbstractControl {
-    errors: ComputedRef<ValidationErrors>;
+    errors: ComputedRef<ValidationErrors | ValidationErrors[]>;
     dirty: vue.Ref<boolean>;
     valid: ComputedRef<boolean>;
+    aware: ComputedRef<boolean>;
     hasError(): boolean;
@@ -54,7 +54,7 @@ }
 interface FormGroupGenericType {
-    [key: string]: AvailableType | FormGroupGenericType | FormGroupGenericType[];
+    [key: string]: AvailableType | FormGroupGenericType | AvailableType[] | FormGroupGenericType[];
 }
-declare type FormErrors<T extends FormGroupGenericType> = {
-    [K in keyof T]: T[K] extends AvailableType | undefined ? ValidationErrors$1 : T[K] extends FormGroupGenericType ? FormGroup<T[K]>['errors'] : never;
-};
+declare type FormErrors<T extends FormGroupGenericType> = ComputedRef<{
+    [K in keyof T]: T[K] extends AvailableType | undefined ? ValidationErrors : T[K] extends FormGroupGenericType ? FormGroup<T[K]>['errors']['value'] : never;
+}>;
 declare class FormGroup<T extends FormGroupGenericType> extends AbstractControl {
@@ -69,3 +69,3 @@ private formGroupBuilder;
     constructor(formGroupBuilder: FormGroupBuilder<T>);
-    errors: ComputedRef<FormErrors<T>>;
+    errors: FormErrors<T>;
     markAsDirty(): void;
@@ -72,0 +72,0 @@ markAsPristine(): void;

build/reactiveForm/abstractControl.js

@@ -1,2 +0,2 @@
-import{ref as r,computed as t}from"vue";var e=function(){function e(){var e=this;this.dirty=r(!1),this.valid=t((function(){return e.dirty.value&&!e.errors.value}))}return e.prototype.hasError=function(){return!!this.errors.value},e}();export{e as default};
+import{ref as r,computed as t}from"vue";var e=function(){function e(){var e=this;this.dirty=r(!1),this.valid=t((function(){return e.dirty.value&&!e.errors.value})),this.aware=t((function(){return e.dirty.value&&!e.valid.value}))}return e.prototype.hasError=function(){return!!this.errors.value},e}();export{e as default};
 //# sourceMappingURL=abstractControl.js.map

package.json

 {
   "name": "vue-reactive-form",
-  "version": "0.1.19",
-  "description": "A reactive form library, which can help manage form data. It can be use all kind of Form UI",
+  "version": "0.1.20",
+  "description": "A reactive form library, which can help manage form data. It's suitable for all kinds of Form UI.",
   "author": "ronny1020",
@@ -6,0 +6,0 @@ "scripts": {

README.md

@@ -5,3 +5,3 @@ # vue-reactive-form
 
-It can be use all kind of Form UI.
+It can be used in all kinds of Form UI.
 
@@ -33,3 +33,3 @@ Besides, It uses TypeScript generics to manage the types of data.
         <input id="email" v-model="email" type="input" class="form-control" />
-        has error: {{ formGroup.controls.email.errors.value ? 'Yes' : 'No' }}
+        has error: {{ formGroup.controls.email.errors.value ? 'Yes': 'No' }}
       </div>
@@ -81,3 +81,3 @@ <div class="mb-3">
   requiredValidator,
-} from '../../build/vue-reactive-form'
+} from 'build/vue-reactive-form'
 
@@ -120,3 +120,3 @@ export default defineComponent({
 
-The fallowing is the demo of this code.
+The following is the demo of this code.
 
@@ -137,3 +137,3 @@ ## Demo
 
-This is used to defined the input reference, which will be used in the fallowing FormGroup.
+This is used to define the input reference, which will be used in the following FormGroup.
 
@@ -161,3 +161,3 @@ | Property     | type            | required | default | description                                                  |
 
-It's a Object with keys and values, and value could be the Fallowing types.
+It's an Object with keys and values, and value could be the Following types.
 
@@ -184,37 +184,43 @@ - [InputBuilder](#inputbuilder)
 
-The Class used to control a input.
+The Class used to control input.
 
 - ref
 
-  type : `Ref` (Vue api)
+  type: `Ref` (Vue api)
 
-  Vue refs api, which can be used in V-model.
+  Vue refs API, which can be used in V-model.
 
 - validators
 
-type : `Validator`
+type: `Validator`
 
-The validator setted in the [InputBuilder](#inputbuilder), used to check the input validity.
+The validator set in the [InputBuilder](#inputbuilder), used to check the input validity.
 
 - dirty
 
-type : `Ref<boolean>` (Vue api)
+type: `Ref<boolean>` (Vue api)
 
-It's false by default, after changing the value of the ref it would be marked as true
+It's false by default. After changing the value of the ref, it would be true.
 
 - errors
 
-  type : `ComputedRef<ValidationErrors>` (Vue api)
+  type: `ComputedRef<ValidationErrors>` (Vue api)
 
-  It's null by default, after changing the value of the ref it would be marked as the error setted in the validators.
+  Errors generated by failing validation, or null if there are no errors.
 
 - valid
 
-  type : `ComputedRef<boolean>` (Vue api)
+  type: `ComputedRef<boolean>` (Vue api)
 
-  It's false by default, if it's dirty and the error is null, it would be marked as true.
+  It's false by default. If it's dirty and the error is null, it would be true.
 
+- aware
+
+  type: `ComputedRef<boolean>` (Vue api)
+
+  It's false by default. If it's dirty and not valid, it would be true.
+
 - markAsDirty()
 
-  return : `void`
+  return: `void`
 
@@ -225,3 +231,3 @@ Mark the property dirty as true.
 
-  return : `void`
+  return: `void`
 
@@ -232,5 +238,5 @@ Mark the property dirty as false.
 
-  args : `Validator`
+  args: `Validator`
 
-  return : `void`
+  return: `void`
 
@@ -241,5 +247,5 @@ Append the validator to the validators.
 
-  args : `Validator | Validator[]`
+  args: `Validator | Validator[]`
 
-  return : `void`
+  return: `void`
 
@@ -250,3 +256,3 @@ Set the validators.
 
-  return : `void`
+  return: `void`
 
@@ -257,9 +263,9 @@ Clear the validators.
 
-  return : `void`
+  return: `void`
 
-  Reset the value, dirty and the errors.
+  Reset the value, dirty, and the errors.
 
 #### **FormGroup**
 
-The main class of this package. It's used to create a form group with not only inputs but also other form groups.
+The main Class of this package. It's used to create a form group with not only inputs but also other form groups.
 
@@ -270,15 +276,15 @@ It's also the default export of this package.
 
-TypeScript generics is used to define the mapped types of the form controls.
+TypeScript type support for the form controls.
 
-The generic Type variables "T" is the type of the FormBuilder used to create the form group.
+The generic Type variable "T" is the type of the FormBuilder used to create the form group.
 
 - dirty
 
-  type : `Ref<boolean>` (Vue api)
+  type: `Ref<boolean>` (Vue api)
 
-  It's false by default, after changing any form control value it would be marked as true.
+  It's false by default. After changing any form control value it would be marked as true.
 
 - errors
 
-  type : `ComputedRef<FormErrors<T>>`
+  type: `ComputedRef<FormErrors<T>>`
 
@@ -289,3 +295,3 @@ It's an assembly of all the errors of the form controls. If there is no error, it would be null.
 
-  type : `ComputedRef<boolean>` (Vue api)
+  type: `ComputedRef<boolean>` (Vue api)
 
@@ -296,3 +302,3 @@ It's false by default, if it's dirty and the error is null, it would be marked as true.
 
-  return : `void`
+  return: `void`
 
@@ -303,3 +309,3 @@ Mark the properties dirty in all the form controls as true.
 
-  return : `void`
+  return: `void`
 
@@ -310,3 +316,3 @@ Mark the properties dirty in all the form controls as false.
 
-  return : `void`
+  return: `void`
 
@@ -317,3 +323,3 @@ Reset the value, dirty and the errors of all the form controls.
 
-  type : `FormControls<T>`
+  type: `FormControls<T>`
 
@@ -324,3 +330,3 @@ It's an assembly of all the form controls or form groups.
 
-  type : `FormRefs<T>`
+  type: `FormRefs<T>`
 
@@ -333,5 +339,5 @@ It's an assembly of all the refs of the form controls or form groups.
 
-  args : `FormBuilder`
+  args: `FormBuilder`
 
-  return : `void`
+  return: `void`
 
@@ -342,5 +348,5 @@ Append a group of form controls to the form group.
 
-  args : `string | string[]`
+  args: `string | string[]`
 
-  return : `void`
+  return: `void`
 
@@ -351,5 +357,5 @@ Remove one or more form controls from the form group by the key of the property.
 
-The function used to check the validity of the input.
+The function is used to check the validity of the input.
 
-Type of the validator is Validator, which is defined as the fallowing.
+The type of the validator is defined as the following.
 
@@ -366,3 +372,3 @@ You can also use ValidatorFactory
 
-This package also provide some validator factories to create validator as the fallowing, but you can also use your own validators or validator factories.
+This package also provides some validator factories to create validator as the following, but you can also use your validators or validator factories.
 
@@ -373,3 +379,3 @@ - requiredValidator()
 
-  It's used to check if the input has a value.
+  To check if the input has a value.
 
@@ -384,11 +390,11 @@ - emailValidator()
 
-  args : `RegExp | string`
+  args: `RegExp | string`
 
   error type: `{pattern: 'pattern'}`
 
-  It's to check if the value is match the regex.
+  It's to check if the value matches the regex.
 
 - maxLengthValidator(maxLength)
 
-  args : `number`
+  args: `number`
 
@@ -401,3 +407,3 @@ error type: `{maxLength: number}`
 
-  args : `number`
+  args: `number`
 
@@ -404,0 +410,0 @@ error type: `{minLength: number}`

No alert changes

Improved metrics

Total package byte prevSize

41250

increased by0.62%

Lines of code

127

increased by0.79%

Number of lines in readme file

395

increased by1.54%

No dependency changes