# vue-inline-text-editor

> An inline text editor for VueJS.

Latest version **1.0.1** (published 2018-10-12) · 0 weekly downloads

## Install

```sh
npm install vue-inline-text-editor
pnpm add vue-inline-text-editor
yarn add vue-inline-text-editor
bun add vue-inline-text-editor
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2018-10-12 |
| First published | 2018-10-12 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 82.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | ricksharp7 |
| Keywords | vue, vuejs, text editor, component |

## Links

- npm: https://www.npmjs.com/package/vue-inline-text-editor
- npm.io page: https://npm.io/package/vue-inline-text-editor

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.1.0

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 1.0.1 (latest) — 2018-10-12
- 1.0.0 — 2018-10-12

## README

# vue-inline-text-editor

> An inline text editor for VueJS.

Displays as standard text. Clicking the text opens an editor. Also supports various formatting and validation features.

## Demo

[Demo](./demo/index.html)

## Usage

### Install

```bash
npm install vue-inline-text-editor --save
```

### CommonJS

```javascript
var VueInlineTextEditor = require('vue-inline-text-editor');

new Vue({
    components: {
        'vue-inline-text-editor': VueInlineTextEditor
    },
    data: function () {
        return {
            value: ''
        };
    },
    methods: {
        onBlur: function() {
            console.log('text blur:');
        },
        onClose: function() {
            console.log('text close:');
        },
        onChange: function () {
            console.log('text change:');
        },
        onOpen: function () {
            console.log('text open:');
        },
        onUpdate: function() {
            console.log('text update:');
        }
    },
    template: '<vue-inline-text-editor :value="value" @blur="onBlur" @close="onClose" @change="onChange" @open="onOpen" @update="onUpdate"></vue-inline-text-editor>'
});
```

### ES6
```javascript
import VueInlineTextEditor from 'inline-text-editor';

new Vue({
    components: {
        'inline-text-editor': VueInlineTextEditor
    },
    data: function () {
        return {
            value: ''
        };
    },
    methods: {
        onBlur: function() {
            console.log('text blur:');
        },
        onClose: function() {
            console.log('text close:');
        },
        onChange: function () {
            console.log('text change:');
        },
        onOpen: function () {
            console.log('text open:');
        },
        onUpdate: function() {
            console.log('text update:');
        }
    },
    template: '<inline-text-editor :value="value" @blur="onBlur" @close="onClose" @change="onChange" @open="onOpen" @update="onUpdate"></inline-text-editor>'
})
```

### Props
| Property | Type | Description | Default |
|:--|:--|:--|:--|
| autofocus | boolean | Set focus to the control once it is displayed | false |
| close-on-blur | boolean | Automatically close the control and save changes on blur | false |
| currency-decimal-places | integer | For currency values, the number of decimal places to display | 2 |
| currency-symbol | string | For currency values, the symbol to display | $ |
| disabled | boolean | If true, the field cannot be edited | false |
| hover-effects | boolean | If true, display a hover state | false |
| max-length | integer | The maximum string length to allow | null |
| min-length | integer | The minimum string length to allow | null |
| placeholder | string | Placeholder text to display | null |
| required | boolean | If true, a value is required | false |
| type | string | The type of control. Options include: 'text', 'number', 'currency', 'percentage' | text |
| value.sync | mixed | The value to bind to. Be sure to include the sync modifier |  |

## Contribution
First, install dependencies
```
npm install
```
Second, setup development environment
```
vue serve main.js
```
Third, run tests as you develop. Please provide tests for any new features.
```
npm run test
```
Fourth, check inting
```
npm run lint
```
Fifth, build the dist files
```
npm run build
```

## License

[MIT](http://opensource.org/licenses/MIT)

## Author

[Rick Sharp](mailto:rick@causelabs.com) for [CauseLabs](https://www.causelabs.com)

---
_Source: https://npm.io/package/vue-inline-text-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._