├── .gitignore ├── .travis.yml ├── LICENSE ├── LICENSE_HEADER.txt ├── README.md ├── example ├── app.js ├── example.gif └── index.html ├── gulpfile.js └── src ├── vue-editable.css └── vue-editable.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '7' 4 | before_install: 5 | - npm install gulp 6 | - npm install gulp-uglify gulp-util gulp-concat gulp-minify-css gulp-header 7 | script: 8 | - gulp build 9 | - zip -rj build_travis.zip dist/** 10 | deploy: 11 | skip_cleanup: true 12 | provider: releases 13 | api_key: 14 | secure: yB2Xax+N/reGRjuiiQCnucDPqB6+iT1pnK3YH+976xpclmF7Hd0PXop8GvxyV3sX7ijs/ZDSTi3C8OxLGbW5b1wKbxfmP/UNeuJX2lVtYJwh2yQgByLnsKaP+QhC5GgFUW8eqU1+F1SjGUJsa9BspcQru70WaErW8c6EOLO+zET3O45O+XSyiSwbRMKAVr2YjN6EHEK5QxhHMCmzceDjO26RQn6bL3kD9RomjoIITFri7vtByh8iqwPk4XXFs8Qe7NArA3dra58NistImBJGQuuOLx+e1WbZs8KdMOyvKokyoCoJxobCKj7Oun7+Et9Yx6i7fFpw4pl1GKXN6OzCmFHEVRpnsn9cH4CUxjYFEceTlL6S5JDs8IAla5KU0pLdNIl0itjsJu8OgXCxdmCaaXoNnFhx31rbtAl6rybYfNaRDTf8i9cwKM3tVIOcZGu+/XHslWwHWp7sOiQ4n2tulBTcFx0WiHp4U8urEXktqM7Oijgfwlu/VAex1c+YTegSSUOFEFYkMjuvl20PHPm+N8coIsq2Ki/Pmvyoxeyr5kSkNsni2wyv312hkDqWXKPImL6Y+QPxGvMmFFfgUWYjRW2vRTDa1RCiFTt6lcfur3pjNerkaBEMxW1XKpa4kvtWNdJRLKbxU4ABzQ69AvV3bQwRE8M2/gY+L6CX+0uWY4k= 15 | file_glob: true 16 | file: build_travis.zip 17 | on: 18 | tags: true 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Christoph Müller 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /LICENSE_HEADER.txt: -------------------------------------------------------------------------------- 1 | /** 2 | MIT License 3 | 4 | Copyright (c) 2017 Christoph Müller 5 | **/ 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-editable 2 | 3 | [![](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org) 4 | [![Build Status](https://travis-ci.org/cmllr/vue-editable.svg?branch=master)](https://travis-ci.org/cmllr/vue-editable) 5 | 6 | 7 | ![](https://raw.githubusercontent.com/cmllr/vue-editable/master/example/example.gif) 8 | 9 | In-place editing for Vue.js 2. 10 | 11 | > This plugin is still under active development. Do not use in production projects. 12 | 13 | ## Bootstrap 14 | 15 | 1. Include `vue-editable.min.js` and `vue-editable.min.css` from https://github.com/cmllr/vue-editable/releases 16 | 2. Include the plugin via `Vue.use(editable)` 17 | 18 | ## Core features 19 | 20 | The directive `v-editable=dataMember` is the main directive. The attribute value is a existing property. If `dataMember` is a nested structure, simply use a `foo.bar.barz`-like syntax. 21 | 22 | ``` 23 | 24 | ``` 25 | 26 | ### Danger ahead: Iterated edit 27 | 28 | If you want to edit objects out of an loop, e. g. `v-for`, you have to inform the library what the given index of the object is. 29 | 30 | For this purpose, you can use the `data-index` attribute. Note the `:` just before the attribute's name! 31 | 32 | ``` 33 | :data-index="key" 34 | ``` 35 | 36 | If your array does contain objects, not scalar types (like number or string), you also have to attribute the property which should be edited. For this purpose, you can use the attribute `data-property=name`. Please note: There is no `:` before the attribute name. 37 | 38 | ``` 39 | data-property="customerName" 40 | ``` 41 | 42 | ## Attributes 43 | 44 | If you want to control the display of the displayed input, e. g. with `input type='number'`, you can do this with the suffix `data-`. E. g. `type` becomes `data-type`, the content remains the same. 45 | 46 | ## Events 47 | 48 | ``` 49 | vm.$on(name,function(e){ 50 | //do something 51 | }); 52 | 53 | ``` 54 | 55 | |Event-Name|e| 56 | |-|-| 57 | |editable-changed|An object with members `newValue` and `oldValue` (dereferenced)| 58 | |editable-opened|the element which is currently edited| 59 | |editable-aborted|the element which should be edited| 60 | 61 | ## Type keeping 62 | 63 | The library tries to guess the old value type and converts the new value according to the determined type. There is currently not settings for turning this on or off or in case of switching types, e. g. form `int` to `float`. 64 | 65 | ## Problems 66 | 67 | - `v-for` expression do not work overall 68 | - not pretty at all 69 | - kinda buggy 70 | - no tests 71 | - options missing 72 | - ES6 compalibity unknown 73 | 74 | ## License 75 | 76 | MIT -------------------------------------------------------------------------------- /example/app.js: -------------------------------------------------------------------------------- 1 | Vue.use(editable,{ 2 | css: { 3 | input: "form-control vue-editable-input-width", 4 | hidden: "vue-editable-hidden", 5 | editable: "vue-editable-can-edit" 6 | } 7 | }); 8 | app = new Vue({ 9 | el: '.vue', 10 | data: { 11 | message: 'You can change this value', 12 | frank: 1000, 13 | susanne: 1000, 14 | number: 244, 15 | nested:{ 16 | obj:{ 17 | message: 'nested Information' 18 | } 19 | }, 20 | table: [ 21 | 500, 22 | 600 23 | ], 24 | staff: [ 25 | { 26 | "name":"Frank", 27 | "income":1000, 28 | "car":true 29 | },{ 30 | "name":"Susanne", 31 | "income":1000, 32 | "car":false 33 | } 34 | ] 35 | } 36 | }); 37 | app.$on("editable-changed",function(e){ 38 | console.log(e); 39 | }); 40 | 41 | app.$on("editable-opened",function(e){ 42 | console.log(e); 43 | }); 44 | 45 | app.$on("editable-aborted",function(e){ 46 | console.log(e); 47 | }); 48 | -------------------------------------------------------------------------------- /example/example.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmllr/vue-editable/9e57b066b9024def2421b5b6deab1b85ab7f903e/example/example.gif -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |

vue-editable

14 | vue-editable is a component to manipulate data values in the view without the need to develop an edit dialog. 15 |

Basic example

16 |

17 | Use v-editable='property' to enable editing. property is the property name in $.data, it can be an nested path (see Nested example) 18 |

19 | 20 |

Example with additional attributes

21 |

22 | Use data-type='number' to set the input type. Attributes with data- prefix will be forwarded to the input, e.g. 23 |

28 |

29 | 30 |

Table

31 |

32 | If you are using v-for, it is a little bit more complicated. You need to tell vue-editable the property you want to update and the index of the element itself. 33 | You can do this with the attributes data-property and data-index. 34 |

35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 |
NameIncomeCar present?
{{ value.name }}{{ value.income }}{{ value.car }}
47 |

48 | If you are just iterating plain arrays, just remove data-property. 49 |

50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
Value
{{ value }}
58 |

Nested example

59 | 
60 | {{
61 |   JSON.stringify(nested)  
62 | }}
63 |
64 |

65 | Use v-editable="nested.obj.message" to map the nested structure. 66 |

67 | 68 |
69 |
70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // including plugins 2 | var gulp = require('gulp'), 3 | uglify = require("gulp-uglify"), 4 | gutil = require('gulp-util'), 5 | concat = require('gulp-concat'), 6 | minifyCss = require("gulp-minify-css"), 7 | fs = require('fs'), 8 | header = require("gulp-header"); 9 | 10 | var scripts = ['./src/vue-editable.js']; 11 | 12 | var styles = ['./src/vue-editable.css']; 13 | 14 | var getCopyright = function () { 15 | return fs.readFileSync('./LICENSE_HEADER.txt'); 16 | }; 17 | 18 | gulp.task('build', function () { 19 | gulp.src(scripts) 20 | .pipe(uglify()) 21 | .on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); }) 22 | .pipe(concat('vue-editable.min.js')) 23 | .pipe(header(getCopyright())) 24 | .pipe(gulp.dest('dist')); 25 | gulp.src(styles) 26 | .pipe(minifyCss()) 27 | .on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); }) 28 | .pipe(concat('vue-editable.min.css')) 29 | .pipe(header(getCopyright())) 30 | .pipe(gulp.dest('dist')); 31 | }); 32 | -------------------------------------------------------------------------------- /src/vue-editable.css: -------------------------------------------------------------------------------- 1 | .vue-editable-hidden{ 2 | display: table-caption; 3 | } 4 | .vue-editable-input{ 5 | margin-top: 0.3em; 6 | margin-bottom: 0.3em; 7 | color:black; 8 | } 9 | .vue-editable-input-width{ 10 | width: 14em; 11 | } 12 | .vue-editable-can-edit{ 13 | cursor: text; 14 | color:#337ab7; 15 | } -------------------------------------------------------------------------------- /src/vue-editable.js: -------------------------------------------------------------------------------- 1 | editable = { 2 | created: function(){ 3 | console.log(this); 4 | }, 5 | css:{ 6 | input: "form-control vue-editable-input", 7 | hidden: "vue-editable-hidden", 8 | editable: "vue-editable-can-edit" 9 | }, 10 | id: "_vue_editable_", 11 | openInput: null, 12 | parent: null, 13 | install: function(vue,options){ 14 | if (typeof options !== 'undefined' && options !== null && typeof options.css !== 'undefined' && options.css !== null){ 15 | this.css = options.css; 16 | } 17 | Vue.mixin({ 18 | created: function () { 19 | // reference the calling vue-instance 20 | editable.parent = this; 21 | } 22 | }); 23 | Vue.directive('editable', { 24 | inserted: function (el, binding, vnode, oldVnod) { 25 | var property = binding.expression; 26 | var type = el.getAttribute("data-type") === null ? 'text' : el.getAttribute("data-type"); 27 | var attributes = {}; 28 | if (el.attributes.length > 0){ 29 | for (var attr in Object.keys(el.attributes)){ 30 | var attrName = el.attributes[attr].name; 31 | if (attrName.indexOf("data-") !== -1){ 32 | var attrValue = el.attributes[attr].value; 33 | attributes[attrName.replace("data-","")] = attrValue; 34 | } 35 | } 36 | } 37 | el.onclick= function(){ 38 | editable.getInput(el,property,attributes); 39 | } 40 | el.setAttribute("class",el.getAttribute("class") !== null ? + el.getAttribute("class") + editable.css.editable : editable.css.editable); 41 | } 42 | }); 43 | }, 44 | getInput: function(el,property,attributes){ 45 | if (editable.openInput === null){ 46 | editable.openInput = el; 47 | 48 | var c = el.getAttribute("class") !== null ? el.getAttribute("class") : ""; 49 | c += " " + editable.css.hidden; 50 | 51 | el.setAttribute("class",c); 52 | 53 | var input = document.createElement("input"); 54 | for(var attr in attributes){ 55 | input.setAttribute(attr,attributes[attr]); 56 | } 57 | input.setAttribute("class",editable.css.input); 58 | input.setAttribute("id",this.id); 59 | input.setAttribute("v-editable-target",property); 60 | if (el.getAttribute("data-index") !== null){ 61 | input.setAttribute("data-index",el.getAttribute("data-index")); 62 | } 63 | var value = this.getPropertyValue(property,el.getAttribute("data-index")); 64 | if (el.getAttribute("data-property") !== null){ 65 | input.setAttribute("data-property",el.getAttribute("data-property")); 66 | input.value = value[el.getAttribute("data-property")]; 67 | }else{ 68 | input.value = value; 69 | } 70 | 71 | input.onkeydown = this.rebind; 72 | el.appendChild(input); 73 | editable.emitOpenedEvent(el); 74 | input.focus(); 75 | } 76 | }, 77 | convertType: function(oldValue,newValue){ 78 | var isObject = typeof oldValue === 'object'; 79 | if (isObject){ 80 | return newValue; 81 | } 82 | var isInt = Number(oldValue) === oldValue && oldValue % 1 === 0; 83 | var isFloat = Number(oldValue) === oldValue && oldValue % 1 !== 0; 84 | var isBool = oldValue === true || oldValue === false; 85 | if (isBool){ 86 | return newValue === "true" || newValue === true; 87 | } 88 | return isInt ? parseInt(newValue) : (isFloat ? parseFloat(newValue) :newValue); 89 | }, 90 | getPropertyValue: function(path,index){ 91 | var response = null; 92 | if (path.indexOf(".") !== -1){ 93 | var lastObj = this.parent; 94 | var parts = path.split("."); 95 | for(var i =0;i< parts.length;i++){ 96 | var part = parts[i]; 97 | if (typeof lastObj[part] !== 'object'){ 98 | response = lastObj[part]; 99 | break; 100 | } 101 | lastObj = lastObj[part]; 102 | } 103 | }else{ 104 | response = this.parent[path]; 105 | } 106 | if (index !== null){ 107 | return response[index]; 108 | } 109 | return response; 110 | }, 111 | getIndex: function(element){ 112 | return element.getAttribute("data-index") === null ? -1 : parseInt(element.getAttribute("data-index")); 113 | }, 114 | rebind: function(event){ 115 | var child = document.getElementById(this.id); 116 | var index = editable.getIndex(event.srcElement); 117 | if (event.which === 13){ 118 | var value = child.value; 119 | var target = child.getAttribute("v-editable-target"); 120 | var oldValue = null; 121 | var newValue = null; 122 | var reason = null; 123 | editable.openInput.removeChild(child); 124 | if (target.indexOf(".") !== -1){ 125 | var lastObj = editable.parent; 126 | var parts = target.split("."); 127 | for(var i =0;i< parts.length;i++){ 128 | var part = parts[i]; 129 | if (typeof lastObj[part] !== 'object'){ 130 | oldValue = editable.deref(lastObj); 131 | lastObj[part] = editable.convertType(lastObj[part],value); 132 | newValue = editable.deref(lastObj); 133 | break; 134 | } 135 | lastObj = lastObj[part]; 136 | } 137 | reason = "deep-property"; 138 | }else{ 139 | if (index !== -1){ 140 | //An index was forwarded -> the target is an array, maybe iterated via v-for 141 | if (child.getAttribute("data-property") !== null){ 142 | //it is not only an array -> complex objects where iterated 143 | var obj = editable.parent[target][index]; 144 | var prop = child.getAttribute("data-property"); 145 | //update the affected property only 146 | oldValue = editable.deref(obj) 147 | obj[prop] = editable.convertType(obj[prop],value); 148 | newValue = editable.deref(obj); 149 | reason = "property-in-array"; 150 | //reinsert the value 151 | Vue.set(editable.parent[target],index,obj); 152 | }else{ 153 | //the value is value of an array, but there are no complex members -> update complete value 154 | var oldValue = editable.deref(editable.parent[target][index]); 155 | newValue = editable.convertType(oldValue,value); 156 | reason = "element-in-array"; 157 | Vue.set(editable.parent[target],index,newValue); 158 | } 159 | }else{ 160 | oldValue = editable.parent[target]; 161 | newValue = editable.convertType(editable.parent[target],value); 162 | reason = "property"; 163 | editable.parent[target] = newValue; 164 | } 165 | } 166 | editable.emitChangedEvent(oldValue,newValue,reason); 167 | editable.openInput.setAttribute("class",editable.openInput.getAttribute("class").replace(editable.css.hidden,"").trim()); 168 | editable.openInput = null; 169 | } 170 | if (event.which === 27){ 171 | editable.openInput.removeChild(child); 172 | editable.emitAbortedEvent(child); 173 | editable.openInput.setAttribute("class",editable.openInput.getAttribute("class").replace(editable.css.hidden,"").trim()); 174 | editable.openInput = null; 175 | 176 | } 177 | }, 178 | emitChangedEvent: function(oldValue,newValue,changeReason){ 179 | editable.parent.$emit('editable-changed',{ 180 | oldValue: editable.deref(oldValue), 181 | newValue: editable.deref(newValue), 182 | changeReason: changeReason 183 | }); 184 | }, 185 | emitAbortedEvent: function(el){ 186 | editable.parent.$emit('editable-aborted',{ 187 | element: el 188 | }); 189 | }, 190 | emitOpenedEvent: function(el){ 191 | editable.parent.$emit('editable-opened',{ 192 | element: el 193 | }); 194 | }, 195 | deref: function(value){ 196 | return JSON.parse(JSON.stringify(value)); 197 | } 198 | }; 199 | 200 | --------------------------------------------------------------------------------