42 lines
1.6 KiB
JavaScript
42 lines
1.6 KiB
JavaScript
// noinspection JSCheckFunctionSignatures
|
|
Vue.component('tt-button', {
|
|
//language=Vue
|
|
template: `
|
|
<div>
|
|
<template v-if="href">
|
|
<a :href="href" class="btn" :class="buttonClasses" onclick="typeof confirmText === 'string' ? confirm(confirmText) : true">
|
|
<i v-if="icon" :class="icon"></i>
|
|
{{text}}
|
|
</a>
|
|
</template>
|
|
<template v-else>
|
|
<button @click="$emit('click')" class="btn" :class="buttonClasses">
|
|
<i v-if="icon" :class="icon"></i>
|
|
{{text}}
|
|
</button>
|
|
</template>
|
|
</div>
|
|
`, 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},
|
|
// TODO: maybe instead of browser confirmation add a custom beautiful confirmation dialog
|
|
confirmText: {type: String, required: false},
|
|
}, computed: {
|
|
buttonClasses() {
|
|
const classes = {
|
|
'btn-sm': this.sm,
|
|
}
|
|
|
|
if (!this.additionalClass) return classes
|
|
|
|
for (const className of this.additionalClass.split(' ')) {
|
|
classes[className] = true
|
|
}
|
|
|
|
return classes
|
|
}
|
|
}
|
|
}) |