Skip to content

Commit

Permalink
Merge pull request #2 from mhucik/update-readme
Browse files Browse the repository at this point in the history
Update Readme
  • Loading branch information
mhucik authored Jun 26, 2019
2 parents 576d10f + c6cfe0e commit 1db17a1
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 8 deletions.
12 changes: 8 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
# label-edit
Component forked from https://www.npmjs.com/package/label-edit.

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!

## Installation
Expand All @@ -11,7 +13,7 @@ import LabelEdit from 'label-edit'
```
## Usage
```html
<label-edit v-bind:text="text" placeholder="Enter text value" v-on:text-updated-blur="textUpdateCallbackBlur" v-on:text-updated-enter="textUpdateCallbackEnter"></label-edit>
<label-edit v-bind:text="text" placeholder="Enter text value" v-on:text-updated-blur="textUpdateCallbackBlur" v-on:text-updated-enter="textUpdateCallbackEnter" object-id="b386f1ac-9047-11e9-8e78-0242ac120006"></label-edit>
```

### Definition
Expand All @@ -22,14 +24,15 @@ import LabelEdit from 'label-edit'
| v-on:text-updated-blur | callback function to capture the value changes of the input text when text lost its focus |
| v-on:text-updated-enter | callback function to capture the value changes of the input text when user pressed enter |
| placeholder | (optional) placeholder for empty label edit value |
| :object-id | identificator of label edit, which is passed to "on-updated" callback |

## Example

```html
<template>
<div class="hello">
<h3>Text Box 1 with default text and place holder</h3>
<label-edit :text="text" id="labeledit1" v-on:text-updated="textUpdated" placeholder="Enter some text"></label-edit>
<label-edit object-id="b386f1ac-9047-11e9-8e78-0242ac120006" :text="text" id="labeledit1" v-on:text-updated="textUpdated" placeholder="Enter some text"></label-edit>
</div>
</template>
```
Expand All @@ -48,8 +51,9 @@ export default {
LabelEdit,
},
methods: {
textUpdated: function(text){
textUpdated: function(text, objectId){
this.text = text;
//save(text, objectId)
},
}
}
Expand All @@ -61,4 +65,4 @@ export default {

### References

[demo]: https://media.giphy.com/media/PMUxyTGtLN8csmXxFm/giphy.gif
[demo]: https://media.giphy.com/media/PMUxyTGtLN8csmXxFm/giphy.gif
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "label-edit",
"version": "0.2.0",
"name": "mhucik-label-edit",
"version": "0.2.1",
"description": "Click to show input text box Vue Component ... inspired by Trello",
"main": "dist/vue-label-edit.js",
"scripts": {
Expand All @@ -17,7 +17,7 @@
"vuejs",
"vuejs2"
],
"author": "Myo Kyaw Htun",
"author": "Myo Kyaw Htun & Marek Hučík",
"license": "MIT",
"bugs": {
"url": "https://github.com/mhucik/label-edit/issues"
Expand All @@ -42,6 +42,6 @@
},
"devDependencies": {
"serviceworker-webpack-plugin": "^1.0.0-alpha02",
"webpack-cli": "^3.3.5"
"webpack-cli": "^3.3.5"
}
}

0 comments on commit 1db17a1

Please sign in to comment.