@hanhdt/vue-simpleform

A Vue component for building form

Stats

StarsIssuesVersionUpdatedCreatedSize
@hanhdt/vue-simpleform
000.4.23 years ago3 years agoMinified + gzip package size for @hanhdt/vue-simpleform in KB

Readme

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.