vqe

vue-quick-edit

In-place editing with native HTML inputs in Vue

Showing:

Popularity

Downloads/wk

529

GitHub Stars

34

Maintenance

Last Commit

7mos ago

Contributors

3

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Readme

vue-quick-edit

In-place editing with native HTML inputs. Inspired by x-editable

npm version npm size npm downloads Coverage Status

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-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

NameTypeDefaultDescription
buttonCancelTextStringCancelThe text on the Cancel button.
buttonOkTextStringOkThe text on the Ok button.
booleanYesTextStringYesThe text for true when you configure type="boolean".
booleanNoTextStringNoThe text for false when you configure type="boolean"
classesObjectSee DescriptionbuttonCancel: 'vue-quick-editbutton--cancel'
buttonOk: 'vue-quick-edit
button--ok'
buttons: 'vue-quick-editbuttons'
input: 'vue-quick-edit
input'
link: 'vue-quick-editlink'
isClickable: 'vue-quick-edit
link--is-clickable'
isEmpty: 'vue-quick-editlink--is-empty'
isRequired: 'vue-quick-edit
link--is-required'
wrapper: 'vue-quick-edit'
emptyTextStringEmptyThe text to display when there is a falsy value in the v-model directive.
formatMultipleFunctionvalues.join(', ')Specify a callback to format the array for a select, checkbox or radio type.
optionsArray[]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.
placeholderValueString''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.
showButtonsBooleantrueHide the buttons by setting this to false.
startOpenBooleanfalseSet to true if you want to start in edit mode.
typeStringinputThis can be input, textarea, select, checkbox, radio, boolean or any other type you can pass to input.
validatorFunctionnullSpecify a callback to describe why the input is invalid.
v-modelString, Array, Boolean, Number''Usually a string, for checkbox or select[multiple] use an array.

Events

NameParametersDescription
closeCurrent valueFires when the user has interacted with the "ok" or "close" button.
inputCurrent valueFires when the user has interacted with the "ok" button.
showCurrent valueFires when the user has interacted with the display label.
raw-inputCurrent input valueFires the current input value when the user has interacted with the "ok" button.
invalidCurrent value, Validator return valueFires when the validator function returns a truthy value, usually a message why the input is invalid.

Slots

NameDefaultDescription
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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial