stukh / vue-promise-btn Goto Github PK

View Code? Open in Web Editor NEW

173.0 7.0 14.0 4.02 MB

Vue.js plugin that handles buttons async lock state. Demo: https://stukh.github.io/vue-promise-btn/

License: MIT License

JavaScript 46.53% CSS 2.99% HTML 45.66% Vue 4.82%

vue promise-btn vue-promise-btn spinner

vue-promise-btn's Introduction

vue-promise-btn

Example and Documentation

https://STUkh.github.io/vue-promise-btn/

Features

Easy-to-use API
Flexible Usage
Works with any tag and even forms
In Extended Mode - compatible with 3rd party components
Packaged with optional built-in spinner
Only 1.5KB minified and gzipped
ESM, CommonJS, UMD versions

Installation

npm install --save vue-promise-btn

Quick Start:

Import and "handshake" plugin with vue

import Vue from 'vue'
import VuePromiseBtn from 'vue-promise-btn'

// not required. Styles for built-in spinner
import 'vue-promise-btn/dist/vue-promise-btn.css'

Vue.use(VuePromiseBtn) // or with global options Vue.use(VuePromiseBtn, {})

Simple usage: <button v-promise-btn @click="getData">Get Data</button>
Extended usage: <button v-promise-btn={ promise: dataPromise } @click="getData('param')">Get Data</button>

If you face any issue with simple mode, just try out extended, it's more reliable way.

Change log

Please see CHANGELOG for more information what has changed recently.

Important Notice

Always return Promise from expression. Especially in simple mode.

Don't use semicolon in event expressions. It may break promise return in template-compiler:
Good: @click="handler($event)"
Bad: @click="handler($event);"

Contributing

Please see CONTRIBUTING and CODE_OF_CONDUCT for details.

Credits

License

The MIT License (MIT). Please see License File for more information.

vue-promise-btn's People

Contributors

Stargazers

Watchers

Forkers

vue-promise-btn's Issues

The promise provided in extended mode does not accept arrays

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
The promise reference in extended mode does not accept an array expression.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.
https://codesandbox.io/s/2v22232nx0

What is the expected behavior?
I would like to have an array reference in the promise reference.

Which versions of Vue and VuePromiseBtn, and which browser / OS are affected by this issue?
I am using Vue 2.6.8, vue-promise-btn 2.0.2.
The code sandbox has 2.6.10, doesn't make a difference.
On Windows 7, using Chrome 72.0.3626.121

Add support for bootstrap-vue "b-btn"

I'm not sure if it's a bug or a feature but it doesn't seem to work correctly when using the v-promise-btn directive inside a <b-btn> component, for example: https://jsfiddle.net/kb728u3j/

<b-btn v-promise-btn @click="submit">Create</b-btn>

Currently, nothing happen (the spinner is not displayed - the hidden class isn't removed when loading). The same code works as expected with a regular <button>.

Versions:

vue: 2.5.16
vue-promise-btn: "1.1.0"
bootstrap-vue: "2.0.0-rc.11"
Chrome 67.0.3396.99 / Win 10

Vue 2.6 breaks vue-promise-btn: Error: Please, provide proper handler/action for promise-btn

Running on Vue 2.6, vue-promise-btn errors out on instantiating:

[Vue warn]: Error in directive promise-btn bind hook: "Error: Please, provide proper handler/action for promise-btn"

Also visible on the website.

Vuetify Support?

Does this library supports being uses with Vuetify <v-btn />?

For example
<v-btn vue-promise-btn @click.stop="onAuthenticate" block color='primary'>Sign In</v-btn>

I could not get this to work, I believe, to make v-btn as loading state simply specify loading as true as follows
<v-btn loading />

Calling a function with parameters

I try to pass a parameter for the function called when clicking the button, but I figured out that this doesn't work.
Is it there any workaround in order to pass parameters to the function and still have the spinner working?

<button class="btn btn-default" @click="test(param1)" v-promise-btn>Save</button>

Thank you

Function parameters

I am opening this because it is still an issue like reported in #2 - however it looks like there is no activity on that issue.

vue-promise-btn does not like function arguments at all, I want to be able to pass my vee-validate scope directly into the method rather than having to define an additional data property.

Here is a link to the issue reproduced in CodeSandbox, I also included your suggestion from issue #2 which does not work either.

https://codesandbox.io/s/6w4vp0n1l3