1
0
mirror of synced 2024-11-22 05:16:05 +03:00
Go to file
2020-10-19 13:45:11 +03:00
.github/ISSUE_TEMPLATE Library renamed to formulario 2020-05-22 14:22:56 +03:00
build style: Addition of the eslint rules 2020-10-19 13:45:11 +03:00
dist Added build files 2020-10-19 12:32:15 +03:00
examples style: Addition of the eslint rules 2020-10-19 13:45:11 +03:00
src refactor: Rewritten onto typescript@3.9 2020-10-19 13:45:11 +03:00
test refactor: Rewritten onto typescript@3.9 2020-10-19 13:45:11 +03:00
.editorconfig Changed intend_size 2020-05-21 14:30:55 +03:00
.eslintignore Removes old cache directory 2020-02-27 23:46:25 -05:00
.eslintrc.js refactor: Rewritten onto typescript@3.9 2020-10-19 13:45:11 +03:00
.gitignore Added build files 2020-10-19 12:32:15 +03:00
.travis.yml Updates build to use node 11 2019-11-01 14:35:06 -04:00
babel.config.js Removes debugging artifacts for Travis CI troubleshooting 2019-11-01 21:03:01 -04:00
LICENSE.txt Library renamed to formulario 2020-05-22 14:22:56 +03:00
package.json refactor: Rewritten onto typescript@3.9 2020-10-19 13:45:11 +03:00
README.md Errors now are an objects with fields message, rule and context. Fixed validation messages generation. Default validation messages generator added. 2020-05-25 13:41:38 +03:00
tsconfig.json refactor: Rewritten onto typescript@3.9 2020-10-19 13:45:11 +03:00
yarn.lock refactor: Rewritten onto typescript@3.9 2020-10-19 13:45:11 +03:00

What is Vue Formulario?

Vue Formulario is a library, based on Vue Formulate, 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.

The example below creates the authorization form from data:

    {
        "username": "",
        "password": "",
        "options": {
            "anonym": false,
            "tags": ["test"]
        },
    }
    <FormularioForm
        v-model="formData"
        name="formName"
    >
        <FormularioInput
            v-slot="vSlot"
            name="username"
            validation="required|email"
            error-behavior="live"
        >
            <input
                v-model="vSlot.context.model"
                type="text"
                @blur="vSlot.context.blurHandler"
            >
            <div v-if="vSlot.context.showValidationErrors">
                <span
                    v-for="(error, index) in vSlot.context.allErrors"
                    :key="index"
                >
                    {{ error.message }}
                </span>
            </div>
        </FormularioInput>

        <FormularioInput
            v-slot="vSlot"
            name="password"
            validation="required|min:4,length"
        >
            <input
                v-model="vSlot.context.model"
                type="password"
            >
        </FormularioInput>

        <FormularioGrouping name="options">
            <FormularioInput
                v-slot="vSlot"
                name="anonym"
            >
                <div>
                    <input
                        :id="vSlot.id"
                        v-model="vSlot.context.model"
                        type="checkbox"
                    >
                    <label :for="vSlot.id">As anonym</label>
                </div>
            </FormularioInput>
        </FormularioGrouping>

        <FormularioInput
            v-slot="vSlot"
            name="options.tags[0]"
        >
            <input
                v-model="vSlot.context.model"
                type="text"
            >
        </FormularioInput>
    </FormularioForm>

License

MIT

Copyright (c) 2020-present, RetailDriver LLC
Copyright (c) 2020-present, Braid LLC