diff --git a/README.md b/README.md
index ba3625c..04d9ae3 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@ 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
+Every form control have to rendered inside FormularioField 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`.
@@ -27,7 +27,7 @@ The example below creates the authorization form from data:
v-model="formData"
name="formName"
>
-
-
+
-
-
+
-
-
+
@@ -72,10 +72,10 @@ The example below creates the authorization form from data:
>
-
-
+
+
-
@@ -83,7 +83,7 @@ The example below creates the authorization form from data:
v-model="context.model"
type="text"
>
-
+
```
diff --git a/src/FormularioInput.vue b/src/FormularioField.vue
similarity index 98%
rename from src/FormularioInput.vue
rename to src/FormularioField.vue
index 7c4be81..8ce1b2a 100644
--- a/src/FormularioInput.vue
+++ b/src/FormularioField.vue
@@ -50,8 +50,8 @@ interface ModelSetConverter {
type Empty = null | undefined
-@Component({ name: 'FormularioInput', inheritAttrs: false })
-export default class FormularioInput extends Vue {
+@Component({ name: 'FormularioField', inheritAttrs: false })
+export default class FormularioField extends Vue {
@Inject({ default: undefined }) formularioSetter!: Function|undefined
@Inject({ default: () => (): void => {} }) onFormularioFieldValidation!: Function
@Inject({ default: undefined }) formularioRegister!: Function|undefined
diff --git a/src/FormularioGrouping.vue b/src/FormularioFieldGroup.vue
similarity index 86%
rename from src/FormularioGrouping.vue
rename to src/FormularioFieldGroup.vue
index 7df7275..bd48408 100644
--- a/src/FormularioGrouping.vue
+++ b/src/FormularioFieldGroup.vue
@@ -13,8 +13,8 @@ import {
Provide,
} from 'vue-property-decorator'
-@Component({ name: 'FormularioGrouping' })
-export default class FormularioGrouping extends Vue {
+@Component({ name: 'FormularioFieldGroup' })
+export default class FormularioFieldGroup extends Vue {
@Inject({ default: '' }) path!: string
@Prop({ required: true })
diff --git a/src/FormularioForm.vue b/src/FormularioForm.vue
index 4dfc006..fd8b838 100644
--- a/src/FormularioForm.vue
+++ b/src/FormularioForm.vue
@@ -9,7 +9,7 @@ import Vue from 'vue'
import { Component, Model, Prop, Provide, Watch } from 'vue-property-decorator'
import { clone, getNested, has, merge, setNested, shallowEqualObjects } from '@/utils'
import Registry from '@/form/registry'
-import FormularioInput from '@/FormularioInput.vue'
+import FormularioField from '@/FormularioField.vue'
import {
ErrorHandler,
@@ -125,7 +125,7 @@ export default class FormularioForm extends Vue {
}
@Provide('formularioRegister')
- register (field: string, component: FormularioInput): void {
+ register (field: string, component: FormularioField): void {
this.registry.add(field, component)
}
@@ -149,7 +149,7 @@ export default class FormularioForm extends Vue {
}
this.registry.getNested(field).forEach((registryField, registryKey) => {
- const $input = this.registry.get(registryKey) as FormularioInput
+ const $input = this.registry.get(registryKey) as FormularioField
const oldValue = getNested(this.proxy, registryKey)
const newValue = getNested(values, registryKey)
@@ -193,8 +193,8 @@ export default class FormularioForm extends Vue {
}
hasValidationErrors (): Promise {
- return Promise.all(this.registry.reduce((resolvers: Promise[], input: FormularioInput) => {
- resolvers.push(input.runValidation() && input.hasValidationErrors())
+ return Promise.all(this.registry.reduce((resolvers: Promise[], field: FormularioField) => {
+ resolvers.push(field.runValidation() && field.hasValidationErrors())
return resolvers
}, [])).then(results => results.some(hasErrors => hasErrors))
}
@@ -202,8 +202,8 @@ export default class FormularioForm extends Vue {
resetValidation (): void {
this.localFormErrors = []
this.localFieldErrors = {}
- this.registry.forEach((input: FormularioInput) => {
- input.resetValidation()
+ this.registry.forEach((field: FormularioField) => {
+ field.resetValidation()
})
}
}
diff --git a/src/form/registry.ts b/src/form/registry.ts
index 5287423..c806a45 100644
--- a/src/form/registry.ts
+++ b/src/form/registry.ts
@@ -1,6 +1,6 @@
import { shallowEqualObjects, has, getNested } from '@/utils'
+import FormularioField from '@/FormularioField.vue'
import FormularioForm from '@/FormularioForm.vue'
-import FormularioInput from '@/FormularioInput.vue'
/**
* Component registry with inherent depth to handle complex nesting. This is
@@ -8,7 +8,7 @@ import FormularioInput from '@/FormularioInput.vue'
*/
export default class Registry {
private ctx: FormularioForm
- private registry: Map
+ private registry: Map
/**
* Create a new registry of components.
@@ -24,7 +24,7 @@ export default class Registry {
* @param {string} field name of the field.
* @param {FormularioForm} component the actual component instance.
*/
- add (field: string, component: FormularioInput): void {
+ add (field: string, component: FormularioField): void {
if (this.registry.has(field)) {
return
}
@@ -85,14 +85,14 @@ export default class Registry {
/**
* Get a particular registry value.
*/
- get (key: string): FormularioInput | undefined {
+ get (key: string): FormularioField | undefined {
return this.registry.get(key)
}
/**
* Get registry value for key or nested to given key
*/
- getNested (key: string): Map {
+ getNested (key: string): Map {
const result = new Map()
for (const i of this.registry.keys()) {
diff --git a/src/index.ts b/src/index.ts
index a8e34b8..0c412e4 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,14 +1,21 @@
-import Formulario, { FormularioOptions } from '@/Formulario.ts'
import { VueConstructor } from 'vue'
+
+import Formulario, { FormularioOptions } from '@/Formulario.ts'
+
+import FormularioField from '@/FormularioField.vue'
+import FormularioFieldGroup from '@/FormularioFieldGroup.vue'
import FormularioForm from '@/FormularioForm.vue'
-import FormularioGrouping from '@/FormularioGrouping.vue'
-import FormularioInput from '@/FormularioInput.vue'
export default {
install (Vue: VueConstructor, options?: FormularioOptions): void {
+ Vue.component('FormularioField', FormularioField)
+ Vue.component('FormularioFieldGroup', FormularioFieldGroup)
Vue.component('FormularioForm', FormularioForm)
- Vue.component('FormularioGrouping', FormularioGrouping)
- Vue.component('FormularioInput', FormularioInput)
+
+ // @deprecated Use FormularioField instead
+ Vue.component('FormularioInput', FormularioField)
+ // @deprecated Use FormularioFieldGroup instead
+ Vue.component('FormularioGrouping', FormularioFieldGroup)
Vue.mixin({
beforeCreate () {
diff --git a/src/validation/ErrorObserver.ts b/src/validation/ErrorObserver.ts
index 847a5e6..436f55d 100644
--- a/src/validation/ErrorObserver.ts
+++ b/src/validation/ErrorObserver.ts
@@ -6,7 +6,7 @@ export interface ErrorHandler {
export interface ErrorObserver {
callback: ErrorHandler;
- type: 'form' | 'input';
+ type: 'form' | 'field';
field?: string;
}
diff --git a/storybook/stories/ExampleAddressList.tale.vue b/storybook/stories/ExampleAddressList.tale.vue
index 6d51450..a9bed67 100644
--- a/storybook/stories/ExampleAddressList.tale.vue
+++ b/storybook/stories/ExampleAddressList.tale.vue
@@ -2,19 +2,19 @@
Address list
-
-
-
+
-
{{ error }}
-
+
-
{{ error }}
-
+
-
-
+
+
-
+