@jiffylive/vue-j-editable/README.md

Edit in place with validation for Vue

<h1>Vue edit in place (contentEditable) with validation</h1>
Creates an editable element with optional validation rules and tooltip for messages.<br/>
Allows different format types validated by vuelidate.<br/>
Emits events for confirmed field update and live updates.
Supports international currencies including US, England, Australia, Russia, Germany, Mexico, Italy, Japan, China, India and Indonesia.

## 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 <a href="https://vuelidate.js.org/#sub-builtin-validators">vuelidate documentation</a> for more info about specific rules.
These rules can be specified by property or via rules JSON

```bash
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

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

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

components: {
  "Editable": jEditable
}

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

## License

MIT