Vue-inputag NPM

vue-inputag

All html inputs in a single vue component Live Demo

Install

npm install --save vue-inputag

Usage

  import Vue from '../node_modules/vue/dist/vue.js'
  import inputag from './index.vue'

  new Vue({
    components: {
      'vue-inputag': inputag
    },
    data: {
      model: {
        number: 3.14,
        integer: 25,
        date: '2018-01-01',
        string: 'Fork me on github',
        text: 'This is a sample text\nEdit as many times as you want',
        scientist: 'Gauss',
        country: 2,
        file: null,
        msg: 'hello world!',
        button: 'alert!'
      },
      click: (data) => {window.alert(data.msg)},
      github: 'https://github.com/marcodpt/vue-inputag',
      options: [
        "Eistein",
        "Newton",
        "Gauss",
        "Euler",
        "Riemann"
      ],
      options2: [
        {
          id: 1,
          label: 'Italy'
        }, {
          id: 2,
          label: 'France'
        }, {
          id: 3,
          label: 'Germany'
        }, {
          id: 4,
          label: 'England'
        }
      ]
    }
  }).$mount('#app')

  <div style="margin:20px">
    <label>String: <vue-inputag :href="github" :model="model" id="string" type=""/></label> 
    <div>
      <vue-inputag :model="model" id="string"/>
    </div>
  </div>
  <div style="margin:20px">
    <label>Button: <vue-inputag :click="click" :model="model" id="button" type=""/></label> 
    <div>
      <vue-inputag :model="model" id="msg"/>
    </div>
  </div>
  <div style="margin:20px">
    <label>Text: <vue-inputag :model="model" id="text" type=""/></label> 
    <div>
      <vue-inputag :model="model" id="text" type="textarea"/>
    </div>
  </div>
  <div style="margin:20px">
    <label>Number: <vue-inputag :model="model" id="number" type=""/></label> 
    <div>
      <vue-inputag :model="model" id="number" type="number"/>
    </div>
  </div>
  <div style="margin:20px">
    <label>Date: <vue-inputag :model="model" id="date" type=""/></label> 
    <div>
      <vue-inputag :model="model" id="date" type="date"/>
    </div>
  </div>
  <div style="margin:20px">
    <label>File: <vue-inputag :model="model" id="file" type=""/></label> 
    <div>
      <vue-inputag :model="model" id="file" type="file"/>
    </div>
  </div>
  <div style="margin:20px">
    <label>Progress: <vue-inputag :model="model" id="integer" type="progressbar" style="width:250px"/></label> 
    <div>
      <vue-inputag :model="model" id="integer" type="range"/>
    </div>
  </div>
  <div style="margin:20px">
    <label>Simple Select: <vue-inputag :model="model" id="scientist" type=""/></label> 
    <div>
      <vue-inputag :model="model" id="scientist" type="select" :options="options"/>
    </div>
  </div>
  <div style="margin:20px">
    <label>(id/label) Select: <vue-inputag :model="model" id="country" type=""/></label> 
    <div>
      <vue-inputag :model="model" id="country" type="select" :options="options2"/>
    </div>
  </div>

Props

model
- type: Object
- required: true
- description: Object model
id
- type: String
- required: true
- description: variable id inside object
type
- type: String
- default: "text"
- description: Any input type from html5 + select + textarea + progressbar + pass blank type to static string or with an href become a link or with click become a button
formatter
- type: Function
- default: x => x
- description: Function to format modelid in case of type of input is blank
click
- type: Function
- default: undefined
- description: in case of type is blank string and function passed it will render button
href
- type: String
- default: ""
- description: in case of type is blank string and href passed it will render link, you can use :variable and it will render correct based on model
dependencies
- type: Array
- default: []
- description: (select only) what model fields should not be null before trigger source
options
- type: Array
- default: []
- description: (select only) array of options, you can use {id, label} object if needed
source
- type: Function
- default: function (model, callback) {
  callback(this.options)
  }
- description: (select only) function that calls options
required
- type: Boolean
- default: false
- description: (select only) is required to fill with one of the options?
All other props are bypassed to html element, even styles and classes
You should obseve that we use vue-select in case of select and only in this case
it is better not pass any style or class