1<template> 2 <span> 3 <b-link 4 v-if="value === 'export'" 5 class="align-bottom btn-icon-only py-0 btn-link" 6 :download="download" 7 :href="href" 8 :title="title" 9 > 10 <slot name="icon"> 11 {{ $t('global.action.export') }} 12 </slot> 13 <span v-if="btnIconOnly" class="sr-only">{{ title }}</span> 14 </b-link> 15 <b-link 16 v-else-if="value === 'download'" 17 class="align-bottom btn-icon-only py-0 btn-link" 18 :download="exportName" 19 :href="downloadLocation" 20 :title="title" 21 > 22 <slot name="icon" /> 23 <span class="sr-only"> 24 {{ $t('global.action.download') }} 25 </span> 26 </b-link> 27 <b-button 28 v-else 29 variant="link" 30 :class="{ 'btn-icon-only': btnIconOnly }" 31 :disabled="!enabled" 32 :title="btnIconOnly ? title : !title" 33 @click="$emit('click-table-action', value)" 34 > 35 <slot name="icon"> 36 {{ title }} 37 </slot> 38 <span v-if="btnIconOnly" class="sr-only">{{ title }}</span> 39 </b-button> 40 </span> 41</template> 42 43<script> 44import { omit } from 'lodash'; 45 46export default { 47 name: 'TableRowAction', 48 props: { 49 value: { 50 type: String, 51 required: true, 52 }, 53 enabled: { 54 type: Boolean, 55 default: true, 56 }, 57 title: { 58 type: String, 59 default: null, 60 }, 61 rowData: { 62 type: Object, 63 default: () => {}, 64 }, 65 exportName: { 66 type: String, 67 default: 'export', 68 }, 69 downloadLocation: { 70 type: String, 71 default: '', 72 }, 73 btnIconOnly: { 74 type: Boolean, 75 default: true, 76 }, 77 }, 78 computed: { 79 dataForExport() { 80 return JSON.stringify(omit(this.rowData, 'actions')); 81 }, 82 download() { 83 return `${this.exportName}.json`; 84 }, 85 href() { 86 return `data:text/json;charset=utf-8,${this.dataForExport}`; 87 }, 88 }, 89}; 90</script> 91