69 lines
1.6 KiB
Vue
69 lines
1.6 KiB
Vue
<template>
|
|
<button type="button" class="ui-select-button type-light" :disabled="disabled" @click="tryClick">
|
|
<span class="ui-select-button-icon" v-if="!isImage">
|
|
<ui-icon :symbol="icon" />
|
|
</span>
|
|
<span class="ui-select-button-icon is-image" v-if="isImage">
|
|
<img :src="source" :alt="icon" />
|
|
</span>
|
|
<content class="ui-select-button-content" v-if="label || description">
|
|
<strong class="ui-select-button-label" v-localize:html="{ key: label, tokens: tokens }"></strong>
|
|
<span class="ui-select-button-description" v-if="description" v-localize:html="{ key: description, tokens: tokens }"></span>
|
|
</content>
|
|
<slot></slot>
|
|
</button>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import MediaApi from 'zero/api/media.js';
|
|
|
|
export default {
|
|
name: 'uiSelectButton',
|
|
|
|
props: {
|
|
icon: {
|
|
type: String,
|
|
default: 'fth-box'
|
|
},
|
|
iconAsImage: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
tokens: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
disabled: Boolean
|
|
},
|
|
|
|
|
|
computed: {
|
|
isImage()
|
|
{
|
|
return this.iconAsImage && this.icon.indexOf('fth-') !== 0;
|
|
},
|
|
source()
|
|
{
|
|
return this.iconAsImage ? (this.icon.indexOf('/') === 0 ? this.icon : MediaApi.getImageSource(this.icon)) : null;
|
|
}
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
tryClick(ev)
|
|
{
|
|
this.$emit('click', ev);
|
|
}
|
|
}
|
|
}
|
|
</script> |