Demo

• Install the component, run "cd node_modules/@jiffylive/vue-j-editable" then "npm run serve" to see examples.
• Online demo coming soon

Docs

• [v1.x (latest)] - Docs here on NPM, more on the way

Why use vue-j-editable?

• Usability: Easy for users to update text

• Control: Different inputs and options

• Validation: Uses vuelidate to validate fields

• Tooltips: Presented for invalid fields using popperjs

• Color coding: optionally show color if invalid

• Currency support: show currency in different international formats

• Date support: using date picker

Form input types

• Default: contentEditable div
• Input: input form field
• Select: select with options provided by :selectOptions
• Date: date picker to choose date

Future field types include image, file input, time, date range, color picker

Available rules

The package uses vuelidate for field validation. See vuelidate documentation for more info about specific rules. These rules can be specified by property or via rules JSON

eg.
<jEditable :item="item" field="name" :rules="{required: true, minLength: 4}" />
<jEditable :item="item" field="name" required="true" :rules="{format: 'email'}"  />
<jEditable :item="item" field="name" format="email"  />

Direct property rules:

• Required

Current supported formats:

• Email
• minLength
• numeric
• decimal
• currency (not supported by vuelidate but allows a $ or € symbol to be proceeding the figure)
• URL

Currencies can be supported by providing formatParam parameter eg :formatParam="{country: 'it-IT', currency: 'EUR'}" or {"country": "jp-JP", "currency": "JPY"} See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat for more information about

Input properties

• item - an item (object) or array of values
• field - the name of the field from the object

Available events

• @update when the field is changed and complete (via enter, tab or field blur)
• @updateLive when a character is typed
• @onFocus when the field comes into focus
• @onBlur when the field leaves focus

Current modes

All features are available via properties but these modes are presets to save time

• jEditable: Reads field from object / array and emit updates
• jEditableItem: Reads directly from item properties and sends updates to item
• jEditableItemGetSet: Reads an object via get / set methods

Installation

1. Package Manager

# With npm
npm i @jiffylive/vue-j-editable

import jEditable from '@jiffylive/vue-j-editable';

components: {
  "Editable": jEditable
}

<Editable :item="item" :field="field" />

License

MIT