vue-quick-edit

1.4.0 • Public • Published

vue-quick-edit

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

npm version npm size npm downloads Coverage Status

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.

Package Sidebar

Install

npm i vue-quick-edit

Weekly Downloads

339

Version

1.4.0

License

MIT

Unpacked Size

58.9 kB

Total Files

7

Last publish

Collaborators

  • a1rpun