Ninety-nine Pitchers of Malt

    @netsells/vue-form-state

    0.2.2 • Public • Published

    npm version Build Status codecov

    Vue Form State

    Handle asynchronous loading, error and result states based on the result of a promise.

    Installation

    yarn add @netsells/vue-form-state
    
    import Vue from 'vue';
    import VueFormState from '@netsells/vue-form-state';
     
    Vue.use(VueFormState);

    Options

    You can pass the following options to change the way it functions

    Vue.use(VueFormState, {
        parseError(error) {
            return error.response.data.message;
        },
     
        name: 'handle-form-state',
    });

    parseError

    Parses an error for every form (i.e. globally). Output is stored in error (original error is in rawError)

    parseResult

    Parses a response for every form (i.e. globally). Output is stored in result (original response is in rawResult)

    name

    Change the name of the component (form-state by default)

    Usage

    In your template:

        <form-state :submit="submitForm">
            <template
                v-slot:default="{
                    submit,
                    error,
                    loading,
                    result,
                }"
            >
                <form @submit.prevent="submit">
                    <!-- your form -->
                </form>
            </template>
        </form-state>

    Note that the submit callback is a prop on the form-state component. This is so it has access to the return value (your promise).

    In your methods:

    methods: {
        submitForm() {
            return fetch(url, {
                method: 'POST',
                body: JSON.stringify(this.formData),
            });
        }
    }

    The result of this promise will be set to rawResult in the slot. If it errors, the error will be set to the rawError scoped slot. If you have supplied either a parseResult or parseError optional functional, the result of these will be available as result and error respectively.

    You can also get the result or error via an event emitted by form-state:

    <form-state
        :submit="submitForm"
        @result="handleResult"
        @error="handleError"
    >
        <!-- template -->
    </form-state>
    methods: {
        handleResult(result, rawResult) {
            // code
        },
     
        handleError(error, rawError) {
            // code
        },
    }

    Keywords

    none

    Install

    npm i @netsells/vue-form-state

    DownloadsWeekly Downloads

    19

    Version

    0.2.2

    License

    ISC

    Unpacked Size

    689 kB

    Total Files

    20

    Last publish

    Collaborators

    • rebeccaanderton
    • samturrell
    • martin91s
    • spamoom
    • jakub.gawron