@splitty-test/validation 0.2.9 → 0.2.11

package/README.md

@@ -49,12 +49,12 @@ In the template:
 <template>
     <div class='login-form'>
         <div class='email-field'>
-            <FieldValidation name="email" v-model="email" :validator="login_form_validator" :rules="[rules.required, rules.email]">
+            <FieldValidation name="email" :value="email" :validator="login_form_validator" :rules="[rules.required, rules.email]">
                 <input name="email" v-model="email">
             </FieldValidation>
         </div>
         <div class='password-field'>
-            <FieldValidation name="password" v-model="password" :validator="login_form_validator" :rules="[rules.required]">
+            <FieldValidation name="password" :value="password" :validator="login_form_validator" :rules="[rules.required]">
                 <input name="password" v-model="password">
             </FieldValidation>
         </div>
@@ -68,9 +68,11 @@ In the template:
 ### FieldValidation Component Properties
 
 - **name (String) - Required:** A unique name for the field that is used intenally to reference the field being validated.
-- **v-model (any) - Required:** The value that is being validated.
+- **:value (any) - Required:** The value that is being validated.
+- **group (String):** A group name for validating subsets of fields.
 - **validator (FormValidator) - Required:** The instance of the FormValidator that the field is attached to.
 - **rules (Rule[]): - Conditionally Required** Rules are a list of functions used to validated the value in the v-model. It is only required on the FieldValidation component if they weren't defined when creating the FormValidator.
+- **el (String):** The HTML element in the slot that you want validation triggers applied to. The string should be a selector. For instance, if you want to use a PrimeVue `Select` component inside the validator, you should set `el=".p-select-label"`
 
 ### Making Custom Rules
 
@@ -108,6 +110,6 @@ export {
 Then in the template:
 
 ```html
-<FieldValidation name="pity" v-model="who_do_i_pity" :validator="myValidator" :rules="[myCustomRule]">...</FieldVaidation>
-<FieldValidation name="age" v-model="age" :validator="myValidator" :rules="[myCustomRuleWithArguments(18, 50)]">...</FieldVaidation>
+<FieldValidation name="pity" :value="who_do_i_pity" :validator="myValidator" :rules="[myCustomRule]">...</FieldVaidation>
+<FieldValidation name="age" :value="age" :validator="myValidator" :rules="[myCustomRuleWithArguments(18, 50)]">...</FieldVaidation>
 ```

package/dist/FieldValidation.vue.d.ts

@@ -35,7 +35,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
 }, {
     field(): import('./FieldValidator').FieldValidator;
     error(): string | null | undefined;
-}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, {
+    validate(event: FocusEvent): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     el: {
         type: StringConstructor;
         default: string;

package/dist/FormValidator.d.ts

@@ -3,7 +3,6 @@ import { FieldValidator, FieldValidatorConfig, FieldValidatorOptions, Validation
 import { FieldValidatorGroup } from './FieldValidatorGroup';
 export interface FormValidator {
     dirty: Ref<boolean, boolean>;
-    errors: Reactive<string[]>;
     fields: Reactive<Record<string, FieldValidator>>;
     groups: Reactive<Record<string, FieldValidatorGroup>>;
     touched: Ref<boolean, boolean>;
@@ -18,7 +17,6 @@ export interface FormValidator {
 export type FormValidatorConfig = Record<string, FieldValidatorConfig>;
 export declare function useFormValidator(config?: FormValidatorConfig): {
     dirty: Ref<boolean, boolean>;
-    errors: Reactive<string[]>;
     fields: Record<string, FieldValidator>;
     groups: Record<string, FieldValidatorGroup>;
     touched: Ref<boolean, boolean>;
@@ -27,6 +25,7 @@ export declare function useFormValidator(config?: FormValidatorConfig): {
     removeField: (field_name: string) => void;
     validate: (group_name?: string) => Promise<boolean>;
     isValid: (group_name?: string) => boolean;
+    getErrors: () => Record<string, string[]>;
     setTouched: () => void;
     reset: (group_name?: string) => void;
 };