Files
pleno-vue/src/components/request/LoadButtonWhileAwait.vue
T

42 lines
1014 B
Vue

<script setup>
import {BButton, BIcon, BLoading} from "buefy";
let props = defineProps(['loadFunction', 'icon', 'isLoading', 'disabled'])
import { ref, computed } from 'vue'
// Local loading state for when isLoading prop is not provided
const localIsLoading = ref(false)
// Use computed to react to prop changes, fallback to local state if prop not provided
const isLoading = computed(() => {
if (props.isLoading !== undefined) {
return props.isLoading
}
return localIsLoading.value
})
const loadWhileAwait = async (loadFunction) => {
if (props.isLoading === undefined) {
localIsLoading.value = true
}
await loadFunction()
if (props.isLoading === undefined) {
localIsLoading.value = false
}
}
const handleClick = () => loadWhileAwait(props.loadFunction)
</script>
<template>
<b-button
:loading="isLoading"
:icon-left="icon"
:icon-pack="'fas'"
@click="handleClick"
:disabled="isLoading || (props.disabled ?? false)"
>
<slot />
</b-button>
</template>