@hanhdt/vue-simpleform

    0.4.2 • Public • Published

    vue-simpleform

    A Vue component for building form

    npm (scoped)

    Installation

    NPM

      $npm install --save @hanhdt/vue-simpleform

    YARN

      $yarn add @hanhdt/vue-simpleform

    CDN

      https://unpkg.com/@hanhdt/vue-simpleform@0.4.0/dist/vue-simpleform.umd.js

    Provided Components

    • SimpleForm: This is main component which will generally create HTML form tag
    • FormInput: The form input component utility
    • Loading: A loading component is called when the form is busy

    Usages

    Props descriptions

    • SimpleForm

      • title: This is displayed as Form's title in the <h2> element
      • operation: The asynchronous function called when the form is submitted. It is returned in a promise-style
      • valid: A Boolean to prevent calling the operation if the form is not valid
    • FormInput

      • name: form input's name
      • inputClass: the customed class
      • placeholder: input's placeholder
      • type: type of input tag rendered

    Using SimpleForm component in existing Vue project

    Import package

    in the main.js, import the package as a global component.

     import '@hanhdt/vue-simpleform'

    Add SimpleForm component into *.vue template

      <SimpleForm
        class="form"
        :title="title"
        :operation="() => console.log('form submit')"
        :valid="valid">
     
        <!-- FORM TEXT INPUT -->
        <FormInput
          name="title"
          v-model="title"
          placeholder="Short title (max 100 chars)"
          maxlength="100"
          :text="title"
          required />
     
        <!-- FORM TEXTAREA INPUT -->
        <FormInput
          type="textarea"
          name="description"
          v-model="description"
          placeholder="Describe your problem in details"
          rows="4" />
     
        <template slot="actions">
          <!-- BUTTON ACTIONS -->
          <button type="submit">
            Submit
          </button>
        </template>
      </SimpleForm>

    Sample Page

    Install

    npm i @hanhdt/vue-simpleform

    DownloadsWeekly Downloads

    1

    Version

    0.4.2

    License

    MIT

    Unpacked Size

    1.81 MB

    Total Files

    19

    Last publish

    Collaborators

    • hanhdt