vue-quick-edit
vue-quick-edit copied to clipboard
Published
20 hours ago •
A1rPun
A1rPun
In-place editing with native HTML inputs in Vue
vue-quick-edit
In-place editing with native HTML inputs. Inspired by x-editable
Example
Features
- [x] In-place editing
- [x] Multiple input types
- [x] Native element property bindings
- [x] Theming with CSS overrides or even apply your own classes
- [x] Customize with slots
- [x] Keyboard support: tab for navigation, enter for Ok (+ ctrl for textarea) and escape for cancel
- [ ] Visual feedback when value gets changed or value is invalid
Install
$ npm install --save vue-quick-edit
Global include
import QuickEdit from 'vue-quick-edit';
Vue.component('quick-edit', QuickEdit);
Local include
import QuickEdit from 'vue-quick-edit';
export default {
components: { QuickEdit },
};
Usage
<quick-edit v-model="myValue"></quick-edit>
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| buttonCancelText | String | Cancel | The text on the Cancel button. |
| buttonOkText | String | Ok | The text on the Ok button. |
| booleanYesText | String | Yes | The text for true when you configure type="boolean". |
| booleanNoText | String | No | The text for false when you configure type="boolean" |
| classes | Object | See Description | buttonCancel: 'vue-quick-edit__button--cancel' buttonOk: 'vue-quick-edit__button--ok' buttons: 'vue-quick-edit__buttons' input: 'vue-quick-edit__input' link: 'vue-quick-edit__link' isClickable: 'vue-quick-edit__link--is-clickable' isEmpty: 'vue-quick-edit__link--is-empty' isRequired: 'vue-quick-edit__link--is-required' wrapper: 'vue-quick-edit' |
| emptyText | String | Empty | The text to display when there is a falsy value in the v-model directive. |
| formatMultiple | Function | values.join(', ') |
Specify a callback to format the array for a select, checkbox or radio type. |
| options | Array | [] | The options to display for a select, checkbox or radio type. This can be an array of strings or an array of objects with text & value (& disabled) as properties. |
| placeholderValue | String | '' |
When you pass a placeholder to a select it will display the placeholder as the first default option, you can set the value of this option with placeholderValue. |
| showButtons | Boolean | true | Hide the buttons by setting this to false. |
| startOpen | Boolean | false | Set to true if you want to start in edit mode. |
| type | String | input | This can be input, textarea, select, checkbox, radio, boolean or any other type you can pass to input. |
| validator | Function | null | Specify a callback to describe why the input is invalid. |
| v-model | String, Array, Boolean, Number | '' |
Usually a string, for checkbox or select[multiple] use an array. |
Events
| Name | Parameters | Description |
|---|---|---|
| close | Current value | Fires when the user has interacted with the "ok" or "close" button. |
| input | Current value | Fires when the user has interacted with the "ok" button. |
| show | Current value | Fires when the user has interacted with the display label. |
| raw-input | Current input value | Fires the current input value when the user has interacted with the "ok" button. |
| invalid | Current value, Validator return value | Fires when the validator function returns a truthy value, usually a message why the input is invalid. |
Slots
| Name | Default | Description |
|---|---|---|
| default | `{{ value | |
| button-ok | {{ buttonOkText }} |
A slot to use HTML as a the Ok button text, useful for FontAwesome. |
| button-cancel | {{ buttonCancelText }} |
A slot to use HTML as the Cancel button text, useful for FontAwesome. |
| prepend | `` | Prepend HTML before the display text |
| append | `` | Append HTML after the display text |
Theming
Custom theme
For example just override this class in your style
.vue-quick-edit__link--is-clickable {
color: #BADA55;
}
Bootstrap theme
Set up the classes for the corresponding elements in data
vueQuickEditClasses: {
wrapper: 'form-group form-inline',
input: 'form-control input-sm',
buttons: 'btn-group btn-group-sm',
buttonOk: 'btn btn-primary',
buttonCancel: 'btn btn-link',
},
Maybe add specific overrides for bootstrap
<style scoped>
.form-group {
margin-bottom: 0;
}
.btn-group {
display: inline-block;
}
</style>
Use it like this
<quick-edit :classes="vueQuickEditClasses"></quick-edit>
Thanks to
- Github for hosting
- NPM for hosting
- Travis CI for the service
- Shields.io for the badges
Licence
MIT, see LICENSE.
A1rPun