promise is the promise object, this property is being watched so will reset on change. And default to default if none is provided.
reset on 0 wont reset the button's finaly state, however when a number is entered it will reset to 'default' after said timeout is finished.
disable can be used to disabled the button (button also disables itself while loading, so need to do anything with that).
Slots are optional, will default to well default content. Can also use CSS classes to change apearence.
Events are passed down with v-on="$listeners"
, so
whatever you like.
<PromiseButton @click="onClick" :reset="5000" :promise="promise" :disabled="false">
<template v-slot:rejected>Foei!</template>
<template v-slot:resolved>Aloha.</template>
<template v-slot:loading>Loading</template>
<template v-slot:default>Versturenz</template>
</PromiseButton>
Your click handler just needs to update the promise property, eg something like:
onClick() {
this.promise = new Promise((r, e) =>
setTimeout(() => {
(Math.random > .5)
? r('Resolved.')
: e('Error.')
}, 1000);
}
However the promise can come from anything, eg creating an api load call in mounted, sending said promise along. Would only enabled the button once the it has been resolved, rejected or reset.