58 lines
1.8 KiB
JavaScript
58 lines
1.8 KiB
JavaScript
// noinspection JSCheckFunctionSignatures
|
|
Vue.component('tt-button', {
|
|
//language=Vue
|
|
template: `
|
|
<a v-if="href" :href="href" class="btn" :class="buttonClasses" @click="handleClick">
|
|
<template v-if="loading">
|
|
<span class="spinner"></span>
|
|
</template>
|
|
<template v-else>
|
|
<i v-if="icon" :class="icon"></i>
|
|
{{text}}
|
|
</template>
|
|
</a>
|
|
<button v-else @click="handleClick" class="btn" :class="buttonClasses" :disabled="loading">
|
|
<template v-if="loading">
|
|
<span class="spinner"></span>
|
|
</template>
|
|
<template v-else>
|
|
<i v-if="icon" :class="icon"></i>
|
|
{{text}}
|
|
</template>
|
|
</button>
|
|
`,
|
|
props: {
|
|
sm: {type: Boolean, default: false},
|
|
icon: {type: String, required: false},
|
|
text: {type: String, required: false},
|
|
href: {type: String, required: false},
|
|
additionalClass: {type: String, required: false},
|
|
confirmText: {type: String, required: false},
|
|
loading: {type: Boolean, default: false},
|
|
},
|
|
computed: {
|
|
buttonClasses() {
|
|
const classes = {
|
|
'btn-sm': this.sm,
|
|
'btn-loading': this.loading
|
|
}
|
|
|
|
if (this.additionalClass) {
|
|
this.additionalClass.split(' ').forEach(className => {
|
|
classes[className] = true
|
|
})
|
|
}
|
|
|
|
return classes
|
|
}
|
|
},
|
|
methods: {
|
|
handleClick(event) {
|
|
if (this.loading) return event.preventDefault();
|
|
if (typeof this.confirmText === 'string' && !confirm(this.confirmText)) return event.preventDefault();
|
|
|
|
this.$emit('click', event)
|
|
}
|
|
}
|
|
})
|