├── .gitignore
├── LICENSE
├── README.md
├── dist
    ├── vue-label-edit.js
    ├── vue-label-edit.js.LICENSE.txt
    ├── vue-label-edit.min.js
    └── vue-label-edit.min.js.LICENSE.txt
├── package-lock.json
├── package.json
├── src
    ├── LabelEdit.vue
    └── plugin.js
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .idea


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Myo Kyaw Htun
 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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # label-edit
 2 | Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues, bugs, or improvement. Thanks!
 3 | 
 4 | ## Installation
 5 | ```
 6 | npm install --save label-edit
 7 | ```
 8 | ### Module
 9 | ```js
10 | import LabelEdit from 'label-edit'
11 | ```
12 | ## Usage
13 | ```html
14 | <label-edit :text="text" id="labeledit1" v-on:text-updated="textUpdated" placeholder="Enter some text" v-on:text-updated-blur="textUpdated" v-on:text-updated-enter="textUpdated"></label-edit>
15 | ```
16 | 
17 | ### Definition
18 | 
19 | | Props | Description |
20 | | --------- |:----- |
21 | | :text | default value for label edit |
22 | | v-on:text-updated-blur | callback function to capture the value changes of the input text when text lost its focus |
23 | | v-on:text-updated-enter | callback function to capture the value changes of the input text when user pressed enter |
24 | | placeholder | (optional) placeholder for empty label edit value |
25 | 
26 | ## Example
27 | 
28 | ```html
29 | <template>
30 | 	<div class="hello">
31 | 		<h3>Text Box 1 with default text and place holder</h3>
32 | 		<label-edit :text="text" id="labeledit1" v-on:text-updated="textUpdated" placeholder="Enter some text" v-on:text-updated-blur="textUpdated" v-on:text-updated-enter="textUpdated"></label-edit>
33 | 	</div>
34 | </template>
35 | ```
36 | 
37 | ```js
38 | <script>
39 | import LabelEdit from 'label-edit'
40 | export default {
41 |   name: 'HelloWorld',
42 |   data () {
43 |     return {
44 |       text: 'Click this text!',
45 |     }
46 |   },
47 |   components: {
48 |     LabelEdit,
49 |   },
50 |   methods: {
51 |     textUpdated: function(text){
52 |       this.text = text;
53 |     },
54 |   }
55 | }
56 | </script>
57 | ```
58 | 
59 | ## Demo
60 | ![Gif Demo][demo]
61 | 
62 | ### References
63 | 
64 | [demo]: https://media.giphy.com/media/PMUxyTGtLN8csmXxFm/giphy.gif
65 | 


--------------------------------------------------------------------------------
/dist/vue-label-edit.js:
--------------------------------------------------------------------------------
1 | /*! For license information please see vue-label-edit.js.LICENSE.txt */
2 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("vue-label-edit",[],t):"object"==typeof exports?exports["vue-label-edit"]=t():e["vue-label-edit"]=t()}(self,(function(){return(()=>{"use strict";var __webpack_modules__={"./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/LabelEdit.vue":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n//\n//\n//\n//\n//\n//\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n\tname: 'LabelEdit',\n\tdata: function () {\n\t\treturn {\n\t\t\tedit: false, // define whether it is in edit mode or not\n\t\t\tlabel: '', // v-bind data model for input text\n\t\t\tempty: 'Enter some text value' // empty place holder .. replace with your own localization for default\n\t\t};\n\t},\n\tprops: ['text', 'placeholder'], // parent should provide :text or :placeholder\n\tmethods: {\n\t\tinitText: function () {\n\t\t\tif (this.text == '' || this.text == undefined) {\n\t\t\t\tthis.label = this.vlabel;\n\t\t\t} else {\n\t\t\t\tthis.label = this.text;\n\t\t\t}\n\t\t},\n\t\t// when the div label got clicked and trigger the text box\n\t\tonLabelClick: function () {\n\t\t\tthis.edit = true;\n\t\t\tthis.label = this.text;\n\t\t},\n\t\t// trigger when textbox got lost focus\n\t\tupdateTextBlur: function () {\n\t\t\t// update the edit mode to false .. display div label text\n\t\t\tthis.edit = false;\n\t\t\t// emit text updated callback\n\t\t\tthis.$emit('text-updated-blur', this.label);\n\t\t},\n\t\tupdateTextEnter: function () {\n\t\t\tthis.edit = false;\n\t\t\tthis.$emit('text-updated-enter', this.label);\n\t\t}\n\t},\n\tcomputed: {\n\t\tvplaceholder: function () {\n\t\t\t// check if the placeholder is undefined or empty\n\t\t\tif (this.placeholder == undefined || this.placeholder == '') {\n\t\t\t\t// if it is empty or undefined, pre-populate with built-in place holder text\n\t\t\t\treturn this.empty;\n\t\t\t} else {\n\t\t\t\treturn this.placeholder;\n\t\t\t}\n\t\t},\n\t\tvlabel: function () {\n\t\t\t// after text has been updated\n\t\t\t// return text value or place holder value depends on value of the text\n\t\t\tif (this.text == undefined || this.text == '') {\n\t\t\t\treturn this.vplaceholder;\n\t\t\t} else {\n\t\t\t\treturn this.label;\n\t\t\t}\n\t\t}\n\t},\n\tmounted: function () {\n\t\t// initiate the label view\n\t\tthis.initText();\n\t},\n\tupdated: function () {\n\t\tvar ed = this.$refs.labeledit;\n\t\tif (ed != null) {\n\t\t\ted.focus();\n\t\t}\n\t},\n\twatch: {\n\t\ttext: function (value) {\n\t\t\tif (value == '' || value == undefined) {\n\t\t\t\tthis.label = this.vplaceholder;\n\t\t\t} else {\n\t\t\t\tthis.label = value;\n\t\t\t}\n\t\t}\n\t}\n});\n\n//# sourceURL=webpack://vue-label-edit/./src/LabelEdit.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0")},"./src/LabelEdit.vue":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_LabelEdit_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./LabelEdit.vue */ "./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/LabelEdit.vue");\n/* harmony import */ var _node_modules_vue_loader_lib_template_compiler_index_id_data_v_4fc6ac75_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_LabelEdit_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !!../node_modules/vue-loader/lib/template-compiler/index?{"id":"data-v-4fc6ac75","hasScoped":false,"optionsId":"0","buble":{"transforms":{}}}!../node_modules/vue-loader/lib/selector?type=template&index=0!./LabelEdit.vue */ "./node_modules/vue-loader/lib/template-compiler/index.js?{\\"id\\":\\"data-v-4fc6ac75\\",\\"hasScoped\\":false,\\"optionsId\\":\\"0\\",\\"buble\\":{\\"transforms\\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/LabelEdit.vue");\n/* harmony import */ var _node_modules_vue_loader_lib_runtime_component_normalizer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../node_modules/vue-loader/lib/runtime/component-normalizer */ "./node_modules/vue-loader/lib/runtime/component-normalizer.js");\nvar disposed = false\n/* script */\n\n;\n/* template */\n\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = null\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\n;\nvar Component = (0,_node_modules_vue_loader_lib_runtime_component_normalizer__WEBPACK_IMPORTED_MODULE_2__.default)(\n  _babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_LabelEdit_vue__WEBPACK_IMPORTED_MODULE_0__.default,\n  _node_modules_vue_loader_lib_template_compiler_index_id_data_v_4fc6ac75_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_LabelEdit_vue__WEBPACK_IMPORTED_MODULE_1__.render,\n  _node_modules_vue_loader_lib_template_compiler_index_id_data_v_4fc6ac75_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_LabelEdit_vue__WEBPACK_IMPORTED_MODULE_1__.staticRenderFns,\n  __vue_template_functional__,\n  __vue_styles__,\n  __vue_scopeId__,\n  __vue_module_identifier__\n)\nComponent.options.__file = "src/LabelEdit.vue"\n\n/* hot reload */\nif (false) {}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Component.exports);\n\n\n//# sourceURL=webpack://vue-label-edit/./src/LabelEdit.vue?')},"./node_modules/vue-loader/lib/runtime/component-normalizer.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ normalizeComponent)\n/* harmony export */ });\n/* globals __VUE_SSR_CONTEXT__ */\n\n// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).\n// This module is a runtime utility for cleaner component module output and will\n// be included in the final webpack user bundle.\n\nfunction normalizeComponent (\n  scriptExports,\n  render,\n  staticRenderFns,\n  functionalTemplate,\n  injectStyles,\n  scopeId,\n  moduleIdentifier, /* server only */\n  shadowMode /* vue-cli only */\n) {\n  scriptExports = scriptExports || {}\n\n  // ES6 modules interop\n  var type = typeof scriptExports.default\n  if (type === 'object' || type === 'function') {\n    scriptExports = scriptExports.default\n  }\n\n  // Vue.extend constructor export interop\n  var options = typeof scriptExports === 'function'\n    ? scriptExports.options\n    : scriptExports\n\n  // render functions\n  if (render) {\n    options.render = render\n    options.staticRenderFns = staticRenderFns\n    options._compiled = true\n  }\n\n  // functional template\n  if (functionalTemplate) {\n    options.functional = true\n  }\n\n  // scopedId\n  if (scopeId) {\n    options._scopeId = scopeId\n  }\n\n  var hook\n  if (moduleIdentifier) { // server build\n    hook = function (context) {\n      // 2.3 injection\n      context =\n        context || // cached call\n        (this.$vnode && this.$vnode.ssrContext) || // stateful\n        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional\n      // 2.2 with runInNewContext: true\n      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {\n        context = __VUE_SSR_CONTEXT__\n      }\n      // inject component styles\n      if (injectStyles) {\n        injectStyles.call(this, context)\n      }\n      // register component module identifier for async chunk inferrence\n      if (context && context._registeredComponents) {\n        context._registeredComponents.add(moduleIdentifier)\n      }\n    }\n    // used by ssr in case component is cached and beforeCreate\n    // never gets called\n    options._ssrRegister = hook\n  } else if (injectStyles) {\n    hook = shadowMode\n      ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }\n      : injectStyles\n  }\n\n  if (hook) {\n    if (options.functional) {\n      // for template-only hot-reload because in that case the render fn doesn't\n      // go through the normalizer\n      options._injectStyles = hook\n      // register for functioal component in vue file\n      var originalRender = options.render\n      options.render = function renderWithStyleInjection (h, context) {\n        hook.call(context)\n        return originalRender(h, context)\n      }\n    } else {\n      // inject component registration as beforeCreate hook\n      var existing = options.beforeCreate\n      options.beforeCreate = existing\n        ? [].concat(existing, hook)\n        : [hook]\n    }\n  }\n\n  return {\n    exports: scriptExports,\n    options: options\n  }\n}\n\n\n//# sourceURL=webpack://vue-label-edit/./node_modules/vue-loader/lib/runtime/component-normalizer.js?")},'./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-4fc6ac75","hasScoped":false,"optionsId":"0","buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/LabelEdit.vue':(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   "render": () => (/* binding */ render),\n/* harmony export */   "staticRenderFns": () => (/* binding */ staticRenderFns)\n/* harmony export */ });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c("div", { staticClass: "vlabeledit" }, [\n    !_vm.edit\n      ? _c(\n          "div",\n          { staticClass: "vlabeledit-label", on: { click: _vm.onLabelClick } },\n          [_vm._v(_vm._s(_vm.vlabel))]\n        )\n      : _vm._e(),\n    _vm._v(" "),\n    _vm.edit\n      ? _c("input", {\n          directives: [\n            {\n              name: "model",\n              rawName: "v-model",\n              value: _vm.label,\n              expression: "label"\n            }\n          ],\n          ref: "labeledit",\n          staticClass: "vlabeledit-input",\n          attrs: { type: "text", placeholder: _vm.vplaceholder },\n          domProps: { value: _vm.label },\n          on: {\n            blur: _vm.updateTextBlur,\n            keyup: function($event) {\n              if (\n                !$event.type.indexOf("key") &&\n                _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")\n              ) {\n                return null\n              }\n              return _vm.updateTextEnter($event)\n            },\n            input: function($event) {\n              if ($event.target.composing) {\n                return\n              }\n              _vm.label = $event.target.value\n            }\n          }\n        })\n      : _vm._e()\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nif (false) {}\n\n//# sourceURL=webpack://vue-label-edit/./src/LabelEdit.vue?./node_modules/vue-loader/lib/template-compiler/index.js?%7B%22id%22:%22data-v-4fc6ac75%22,%22hasScoped%22:false,%22optionsId%22:%220%22,%22buble%22:%7B%22transforms%22:%7B%7D%7D%7D!./node_modules/vue-loader/lib/selector.js?type=template&index=0')}},__webpack_module_cache__={};function __webpack_require__(e){var t=__webpack_module_cache__[e];if(void 0!==t)return t.exports;var n=__webpack_module_cache__[e]={exports:{}};return __webpack_modules__[e](n,n.exports,__webpack_require__),n.exports}__webpack_require__.d=(e,t)=>{for(var n in t)__webpack_require__.o(t,n)&&!__webpack_require__.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},__webpack_require__.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__=__webpack_require__("./src/LabelEdit.vue");return __webpack_exports__})()}));


--------------------------------------------------------------------------------
/dist/vue-label-edit.js.LICENSE.txt:
--------------------------------------------------------------------------------
 1 | /*!***************************!*\
 2 |   !*** ./src/LabelEdit.vue ***!
 3 |   \***************************/
 4 | 
 5 | /*!*********************************************************************!*\
 6 |   !*** ./node_modules/vue-loader/lib/runtime/component-normalizer.js ***!
 7 |   \*********************************************************************/
 8 | 
 9 | /*!**********************************************************************************************************************************!*\
10 |   !*** ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/LabelEdit.vue ***!
11 |   \**********************************************************************************************************************************/
12 | 
13 | /*!*****************************************************************************************************************************************************************************************************************************************!*\
14 |   !*** ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-4fc6ac75","hasScoped":false,"optionsId":"0","buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/LabelEdit.vue ***!
15 |   \*****************************************************************************************************************************************************************************************************************************************/
16 | 


--------------------------------------------------------------------------------
/dist/vue-label-edit.min.js:
--------------------------------------------------------------------------------
1 | /*! For license information please see vue-label-edit.min.js.LICENSE.txt */
2 | (()=>{"use strict";var __webpack_modules__={"./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/LabelEdit.vue":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n//\n//\n//\n//\n//\n//\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n\tname: 'LabelEdit',\n\tdata: function () {\n\t\treturn {\n\t\t\tedit: false, // define whether it is in edit mode or not\n\t\t\tlabel: '', // v-bind data model for input text\n\t\t\tempty: 'Enter some text value' // empty place holder .. replace with your own localization for default\n\t\t};\n\t},\n\tprops: ['text', 'placeholder'], // parent should provide :text or :placeholder\n\tmethods: {\n\t\tinitText: function () {\n\t\t\tif (this.text == '' || this.text == undefined) {\n\t\t\t\tthis.label = this.vlabel;\n\t\t\t} else {\n\t\t\t\tthis.label = this.text;\n\t\t\t}\n\t\t},\n\t\t// when the div label got clicked and trigger the text box\n\t\tonLabelClick: function () {\n\t\t\tthis.edit = true;\n\t\t\tthis.label = this.text;\n\t\t},\n\t\t// trigger when textbox got lost focus\n\t\tupdateTextBlur: function () {\n\t\t\t// update the edit mode to false .. display div label text\n\t\t\tthis.edit = false;\n\t\t\t// emit text updated callback\n\t\t\tthis.$emit('text-updated-blur', this.label);\n\t\t},\n\t\tupdateTextEnter: function () {\n\t\t\tthis.edit = false;\n\t\t\tthis.$emit('text-updated-enter', this.label);\n\t\t}\n\t},\n\tcomputed: {\n\t\tvplaceholder: function () {\n\t\t\t// check if the placeholder is undefined or empty\n\t\t\tif (this.placeholder == undefined || this.placeholder == '') {\n\t\t\t\t// if it is empty or undefined, pre-populate with built-in place holder text\n\t\t\t\treturn this.empty;\n\t\t\t} else {\n\t\t\t\treturn this.placeholder;\n\t\t\t}\n\t\t},\n\t\tvlabel: function () {\n\t\t\t// after text has been updated\n\t\t\t// return text value or place holder value depends on value of the text\n\t\t\tif (this.text == undefined || this.text == '') {\n\t\t\t\treturn this.vplaceholder;\n\t\t\t} else {\n\t\t\t\treturn this.label;\n\t\t\t}\n\t\t}\n\t},\n\tmounted: function () {\n\t\t// initiate the label view\n\t\tthis.initText();\n\t},\n\tupdated: function () {\n\t\tvar ed = this.$refs.labeledit;\n\t\tif (ed != null) {\n\t\t\ted.focus();\n\t\t}\n\t},\n\twatch: {\n\t\ttext: function (value) {\n\t\t\tif (value == '' || value == undefined) {\n\t\t\t\tthis.label = this.vplaceholder;\n\t\t\t} else {\n\t\t\t\tthis.label = value;\n\t\t\t}\n\t\t}\n\t}\n});\n\n//# sourceURL=webpack://LabelEdit/./src/LabelEdit.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0")},"./src/plugin.js":(module,__webpack_exports__,__webpack_require__)=>{eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _LabelEdit_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./LabelEdit.vue */ \"./src/LabelEdit.vue\");\n/* module decorator */ module = __webpack_require__.hmd(module);\n\n\nmodule.exports = {\n  install: function (Vue, options) {\n    Vue.component('vue-label-edit', _LabelEdit_vue__WEBPACK_IMPORTED_MODULE_0__.default);\n  }\n};\n\n//# sourceURL=webpack://LabelEdit/./src/plugin.js?")},"./src/LabelEdit.vue":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_LabelEdit_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./LabelEdit.vue */ "./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/LabelEdit.vue");\n/* harmony import */ var _node_modules_vue_loader_lib_template_compiler_index_id_data_v_4fc6ac75_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_LabelEdit_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !!../node_modules/vue-loader/lib/template-compiler/index?{"id":"data-v-4fc6ac75","hasScoped":false,"optionsId":"0","buble":{"transforms":{}}}!../node_modules/vue-loader/lib/selector?type=template&index=0!./LabelEdit.vue */ "./node_modules/vue-loader/lib/template-compiler/index.js?{\\"id\\":\\"data-v-4fc6ac75\\",\\"hasScoped\\":false,\\"optionsId\\":\\"0\\",\\"buble\\":{\\"transforms\\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/LabelEdit.vue");\n/* harmony import */ var _node_modules_vue_loader_lib_runtime_component_normalizer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../node_modules/vue-loader/lib/runtime/component-normalizer */ "./node_modules/vue-loader/lib/runtime/component-normalizer.js");\nvar disposed = false\n/* script */\n\n;\n/* template */\n\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = null\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\n;\nvar Component = (0,_node_modules_vue_loader_lib_runtime_component_normalizer__WEBPACK_IMPORTED_MODULE_2__.default)(\n  _babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_LabelEdit_vue__WEBPACK_IMPORTED_MODULE_0__.default,\n  _node_modules_vue_loader_lib_template_compiler_index_id_data_v_4fc6ac75_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_LabelEdit_vue__WEBPACK_IMPORTED_MODULE_1__.render,\n  _node_modules_vue_loader_lib_template_compiler_index_id_data_v_4fc6ac75_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_LabelEdit_vue__WEBPACK_IMPORTED_MODULE_1__.staticRenderFns,\n  __vue_template_functional__,\n  __vue_styles__,\n  __vue_scopeId__,\n  __vue_module_identifier__\n)\nComponent.options.__file = "src/LabelEdit.vue"\n\n/* hot reload */\nif (false) {}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Component.exports);\n\n\n//# sourceURL=webpack://LabelEdit/./src/LabelEdit.vue?')},"./node_modules/vue-loader/lib/runtime/component-normalizer.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ normalizeComponent)\n/* harmony export */ });\n/* globals __VUE_SSR_CONTEXT__ */\n\n// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).\n// This module is a runtime utility for cleaner component module output and will\n// be included in the final webpack user bundle.\n\nfunction normalizeComponent (\n  scriptExports,\n  render,\n  staticRenderFns,\n  functionalTemplate,\n  injectStyles,\n  scopeId,\n  moduleIdentifier, /* server only */\n  shadowMode /* vue-cli only */\n) {\n  scriptExports = scriptExports || {}\n\n  // ES6 modules interop\n  var type = typeof scriptExports.default\n  if (type === 'object' || type === 'function') {\n    scriptExports = scriptExports.default\n  }\n\n  // Vue.extend constructor export interop\n  var options = typeof scriptExports === 'function'\n    ? scriptExports.options\n    : scriptExports\n\n  // render functions\n  if (render) {\n    options.render = render\n    options.staticRenderFns = staticRenderFns\n    options._compiled = true\n  }\n\n  // functional template\n  if (functionalTemplate) {\n    options.functional = true\n  }\n\n  // scopedId\n  if (scopeId) {\n    options._scopeId = scopeId\n  }\n\n  var hook\n  if (moduleIdentifier) { // server build\n    hook = function (context) {\n      // 2.3 injection\n      context =\n        context || // cached call\n        (this.$vnode && this.$vnode.ssrContext) || // stateful\n        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional\n      // 2.2 with runInNewContext: true\n      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {\n        context = __VUE_SSR_CONTEXT__\n      }\n      // inject component styles\n      if (injectStyles) {\n        injectStyles.call(this, context)\n      }\n      // register component module identifier for async chunk inferrence\n      if (context && context._registeredComponents) {\n        context._registeredComponents.add(moduleIdentifier)\n      }\n    }\n    // used by ssr in case component is cached and beforeCreate\n    // never gets called\n    options._ssrRegister = hook\n  } else if (injectStyles) {\n    hook = shadowMode\n      ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }\n      : injectStyles\n  }\n\n  if (hook) {\n    if (options.functional) {\n      // for template-only hot-reload because in that case the render fn doesn't\n      // go through the normalizer\n      options._injectStyles = hook\n      // register for functioal component in vue file\n      var originalRender = options.render\n      options.render = function renderWithStyleInjection (h, context) {\n        hook.call(context)\n        return originalRender(h, context)\n      }\n    } else {\n      // inject component registration as beforeCreate hook\n      var existing = options.beforeCreate\n      options.beforeCreate = existing\n        ? [].concat(existing, hook)\n        : [hook]\n    }\n  }\n\n  return {\n    exports: scriptExports,\n    options: options\n  }\n}\n\n\n//# sourceURL=webpack://LabelEdit/./node_modules/vue-loader/lib/runtime/component-normalizer.js?")},'./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-4fc6ac75","hasScoped":false,"optionsId":"0","buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/LabelEdit.vue':(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   "render": () => (/* binding */ render),\n/* harmony export */   "staticRenderFns": () => (/* binding */ staticRenderFns)\n/* harmony export */ });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c("div", { staticClass: "vlabeledit" }, [\n    !_vm.edit\n      ? _c(\n          "div",\n          { staticClass: "vlabeledit-label", on: { click: _vm.onLabelClick } },\n          [_vm._v(_vm._s(_vm.vlabel))]\n        )\n      : _vm._e(),\n    _vm._v(" "),\n    _vm.edit\n      ? _c("input", {\n          directives: [\n            {\n              name: "model",\n              rawName: "v-model",\n              value: _vm.label,\n              expression: "label"\n            }\n          ],\n          ref: "labeledit",\n          staticClass: "vlabeledit-input",\n          attrs: { type: "text", placeholder: _vm.vplaceholder },\n          domProps: { value: _vm.label },\n          on: {\n            blur: _vm.updateTextBlur,\n            keyup: function($event) {\n              if (\n                !$event.type.indexOf("key") &&\n                _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")\n              ) {\n                return null\n              }\n              return _vm.updateTextEnter($event)\n            },\n            input: function($event) {\n              if ($event.target.composing) {\n                return\n              }\n              _vm.label = $event.target.value\n            }\n          }\n        })\n      : _vm._e()\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nif (false) {}\n\n//# sourceURL=webpack://LabelEdit/./src/LabelEdit.vue?./node_modules/vue-loader/lib/template-compiler/index.js?%7B%22id%22:%22data-v-4fc6ac75%22,%22hasScoped%22:false,%22optionsId%22:%220%22,%22buble%22:%7B%22transforms%22:%7B%7D%7D%7D!./node_modules/vue-loader/lib/selector.js?type=template&index=0')}},__webpack_module_cache__={};function __webpack_require__(e){var t=__webpack_module_cache__[e];if(void 0!==t)return t.exports;var n=__webpack_module_cache__[e]={id:e,loaded:!1,exports:{}};return __webpack_modules__[e](n,n.exports,__webpack_require__),n.loaded=!0,n.exports}__webpack_require__.d=(e,t)=>{for(var n in t)__webpack_require__.o(t,n)&&!__webpack_require__.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},__webpack_require__.hmd=e=>((e=Object.create(e)).children||(e.children=[]),Object.defineProperty(e,"exports",{enumerable:!0,set:()=>{throw new Error("ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: "+e.id)}}),e),__webpack_require__.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__=__webpack_require__("./src/plugin.js");window.LabelEdit=__webpack_exports__})();


--------------------------------------------------------------------------------
/dist/vue-label-edit.min.js.LICENSE.txt:
--------------------------------------------------------------------------------
 1 | /*!***********************!*\
 2 |   !*** ./src/plugin.js ***!
 3 |   \***********************/
 4 | 
 5 | /*!***************************!*\
 6 |   !*** ./src/LabelEdit.vue ***!
 7 |   \***************************/
 8 | 
 9 | /*!*********************************************************************!*\
10 |   !*** ./node_modules/vue-loader/lib/runtime/component-normalizer.js ***!
11 |   \*********************************************************************/
12 | 
13 | /*!**********************************************************************************************************************************!*\
14 |   !*** ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/LabelEdit.vue ***!
15 |   \**********************************************************************************************************************************/
16 | 
17 | /*!*****************************************************************************************************************************************************************************************************************************************!*\
18 |   !*** ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-4fc6ac75","hasScoped":false,"optionsId":"0","buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/LabelEdit.vue ***!
19 |   \*****************************************************************************************************************************************************************************************************************************************/
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "label-edit",
 3 |   "version": "0.1.1",
 4 |   "description": "Click to show input text box Vue Component ... inspired by Trello",
 5 |   "main": "dist/vue-label-edit.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "build": "rimraf ./dist && webpack --config ./webpack.config.js"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/myokyawhtun/label-edit.git"
13 |   },
14 |   "keywords": [
15 |     "vue",
16 |     "vue-components",
17 |     "vuejs",
18 |     "vuejs2"
19 |   ],
20 |   "author": "Myo Kyaw Htun",
21 |   "license": "MIT",
22 |   "bugs": {
23 |     "url": "https://github.com/myokyawhtun/label-edit/issues"
24 |   },
25 |   "homepage": "https://github.com/myokyawhtun/label-edit#readme",
26 |   "dependencies": {
27 |     "babel": "^6.23.0",
28 |     "babel-core": "^6.26.0",
29 |     "babel-loader": "^7.1.4",
30 |     "babel-plugin-transform-runtime": "^6.23.0",
31 |     "babel-preset-es2015": "^6.24.1",
32 |     "babel-preset-stage-2": "^6.24.1",
33 |     "babel-runtime": "^6.26.0",
34 |     "rimraf": "^2.6.2",
35 |     "vue": "^2.5.16",
36 |     "vue-html-loader": "^1.2.4",
37 |     "vue-loader": "^14.2.2",
38 |     "vue-style-loader": "^4.1.0",
39 |     "vue-template-compiler": "^2.5.16",
40 |     "webpack-merge": "^4.1.2"
41 |   },
42 |   "devDependencies": {
43 |     "serviceworker-webpack-plugin": "^1.0.0-alpha02",
44 |     "webpack": "^5.37.0",
45 |     "webpack-cli": "^4.7.0"
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/src/LabelEdit.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="vlabeledit">
 3 | 		<div class="vlabeledit-label" @click="onLabelClick" v-if="!edit">{{vlabel}}</div>
 4 | 		<input type="text" v-if="edit" v-model="label" v-on:blur="updateTextBlur" ref="labeledit" :placeholder="vplaceholder" class="vlabeledit-input" @keyup.enter="updateTextEnter"/>
 5 | 	</div>
 6 | </template>
 7 | <script>
 8 | export default{
 9 | 	name: 'LabelEdit',
10 | 	data: function(){
11 | 		return {
12 | 			edit: false, // define whether it is in edit mode or not
13 | 			label: '', // v-bind data model for input text
14 | 			empty: 'Enter some text value', // empty place holder .. replace with your own localization for default
15 | 		}
16 | 	},
17 | 	props: ['text','placeholder'], // parent should provide :text or :placeholder
18 | 	methods: {
19 | 		initText: function(){
20 | 			if(this.text==''||this.text==undefined){
21 | 				this.label = this.vlabel
22 | 			}else{
23 | 				this.label = this.text
24 | 			}
25 | 		},
26 | 		// when the div label got clicked and trigger the text box
27 | 		onLabelClick: function(){
28 | 			this.edit = true;
29 | 			this.label = this.text;
30 | 		},
31 | 		// trigger when textbox got lost focus
32 | 		updateTextBlur: function(){
33 | 			// update the edit mode to false .. display div label text
34 | 			this.edit = false;
35 | 			// emit text updated callback
36 | 			this.$emit('text-updated-blur',this.label)
37 | 		},
38 | 		updateTextEnter: function(){
39 | 			this.edit = false;
40 | 			this.$emit('text-updated-enter',this.label)
41 | 		}
42 | 	},
43 | 	computed: {
44 | 		vplaceholder: function(){
45 | 			// check if the placeholder is undefined or empty
46 | 			if(this.placeholder==undefined || this.placeholder==''){
47 | 				// if it is empty or undefined, pre-populate with built-in place holder text
48 | 			 	return this.empty
49 | 			}else{
50 | 				return this.placeholder
51 | 			}
52 | 		},
53 | 		vlabel: function(){
54 | 			// after text has been updated
55 | 			// return text value or place holder value depends on value of the text
56 | 			if(this.text==undefined||this.text==''){
57 | 				return this.vplaceholder
58 | 			}else{
59 | 				return this.label
60 | 			}
61 | 		}
62 | 	},
63 | 	mounted: function(){
64 | 		// initiate the label view
65 | 		this.initText();
66 | 	},
67 | 	updated: function(){
68 | 		var ed = this.$refs.labeledit;
69 | 		if(ed!=null){
70 | 			ed.focus();
71 | 		}
72 | 	},
73 | 	watch: {
74 | 		text: function(value){
75 | 			if(value==''||value==undefined){
76 | 				this.label = this.vplaceholder
77 | 			}else{
78 | 			  this.label = value
79 | 			}
80 | 		}
81 | 	}
82 | }
83 | </script>


--------------------------------------------------------------------------------
/src/plugin.js:
--------------------------------------------------------------------------------
1 | import LabelEdit from './LabelEdit.vue';
2 | 
3 | module.exports = {
4 |   install: function (Vue, options) {
5 |     Vue.component('vue-label-edit', LabelEdit);
6 |   }
7 | };


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const merge = require('webpack-merge');
 3 | const path = require('path');
 4 | 
 5 | var config = {
 6 |   mode: 'development',
 7 |   output: {
 8 |     path: path.resolve(__dirname + '/dist/'),
 9 |   },
10 |   module: {
11 |     rules: [
12 |       {
13 |         test: /\.js$/,
14 |         use: 'babel-loader',
15 |         include: __dirname,
16 |         exclude: /node_modules/
17 |       },
18 |       {
19 |         test: /\.vue$/,
20 |         use: 'vue-loader'
21 |       },
22 |       {
23 |         test: /\.css$/,
24 |         use: 'style!less!css'
25 |       }
26 |     ]
27 |   },
28 |   externals: {
29 |     
30 |   },
31 |   plugins: [
32 |     
33 |   ],
34 |   optimization: {
35 |     minimize: true,
36 |   }
37 | };
38 | 
39 | 
40 | module.exports = [
41 |   merge(config, {
42 |     entry: path.resolve(__dirname + '/src/plugin.js'),
43 |     output: {
44 |       filename: 'vue-label-edit.min.js',
45 |       libraryTarget: 'window',
46 |       library: 'LabelEdit',
47 |     }
48 |   }),
49 |   merge(config, {
50 |     entry: path.resolve(__dirname + '/src/LabelEdit.vue'),
51 |     output: {
52 |       filename: 'vue-label-edit.js',
53 |       libraryTarget: 'umd',
54 |       library: 'vue-label-edit',
55 |       umdNamedDefine: true
56 |     }
57 |   })
58 | ];


--------------------------------------------------------------------------------