https://github.com/mykeels/vue-editable
A collection of editable Vue components
https://github.com/mykeels/vue-editable
components editable javascript vue
Last synced: 4 months ago
JSON representation
A collection of editable Vue components
- Host: GitHub
- URL: https://github.com/mykeels/vue-editable
- Owner: mykeels
- License: mit
- Created: 2017-11-14T14:27:09.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-15T23:18:12.000Z (over 8 years ago)
- Last Synced: 2025-04-03T03:11:13.247Z (about 1 year ago)
- Topics: components, editable, javascript, vue
- Language: JavaScript
- Homepage: https://mykeels.github.io/vue-editable
- Size: 498 KB
- Stars: 8
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Editable
This is a collection of editable Vue components.
The components are "Editable" because you can double-click them and get an input field to edit its content.
Available editable components are:
## Text Editable
```html
```
| Prop | Type | Required | Description |
| ---------- | --------:| --------:| ----:|
| value | String | No | |
| class-name | String | No | |
| is-edit | Boolean | No | |
| multi | Boolean | No | |
| on-change | Function | No | |
## Date Editable
```html
```
| Prop | Type | Required | Description |
| ---------- | --------:| --------:| ----:|
| value | String | Yes | |
| format | String | Yes | |
| class-name | String | No | |
| is-edit | Boolean | No | |
| on-change | Function | No | |
## Select Editable
```html
```
| Prop | Type | Required | Description |
| ---------- | --------:| --------:| ----:|
| value | String | No | |
| values | Array | Yes | |
| class-name | String | No | |
| is-edit | Boolean | No | |
| on-change | Function | No | |
## Time Editable
```html
```
| Prop | Type | Required | Description |
| ---------- | --------:| --------:| ----:|
| value | String | Yes | |
| class-name | String | No | |
| is-edit | Boolean | No | |
| multi | Boolean | No | |
| on-change | Function | No | |
# How to use
You could use via the `` tag:
```html
<script src="https://raw.githubusercontent.com/mykeels/vue-editable/master/build/vue-editable.min.js">
```
Be sure to register the components in your Vue Instance
```html
new Vue({
el: '#app',
data: {
},
components: {
'text-editable': VueEditable.TextEditable,
'date-editable': VueEditable.DateEditable,
'select-editable': VueEditable.SelectEditable,
'time-editable': VueEditable.TimeEditable
}
})
```
# Testing
Testing is done with [Jest](https://github.com/facebook/jest). You can run tests with `npm test`