1.4.0 • Published 3 years ago
vue-quick-edit v1.4.0
vue-quick-edit
In-place editing with native HTML inputs. Inspired by x-editable
Example
Features
- In-place editing
- Multiple input types
- Native element property bindings
- Theming with CSS overrides or even apply your own classes
- Customize with slots
- 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-editGlobal 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-editbutton--cancel'buttonOk: 'vue-quick-editbutton--ok'buttons: 'vue-quick-editbuttons'input: 'vue-quick-editinput'link: 'vue-quick-editlink'isClickable: 'vue-quick-editlink--is-clickable'isEmpty: 'vue-quick-editlink--is-empty'isRequired: 'vue-quick-editlink--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 || emptyText }} | The display value. Available slot props value and raw-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 | | |
| append | |
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.