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' && downloadInNewTab" 17 class="align-bottom btn-icon-only py-0 btn-link" 18 target="_blank" 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-link 28 v-else-if="value === 'download'" 29 class="align-bottom btn-icon-only py-0 btn-link" 30 :download="exportName" 31 :href="downloadLocation" 32 :title="title" 33 > 34 <slot name="icon" /> 35 <span class="sr-only"> 36 {{ $t('global.action.download') }} 37 </span> 38 </b-link> 39 <b-button 40 v-else 41 variant="link" 42 :class="{ 'btn-icon-only': btnIconOnly }" 43 :disabled="!enabled" 44 :title="btnIconOnly ? title : !title" 45 @click="$emit('click-table-action', value)" 46 > 47 <slot name="icon"> 48 {{ title }} 49 </slot> 50 <span v-if="btnIconOnly" class="sr-only">{{ title }}</span> 51 </b-button> 52 </span> 53</template> 54 55<script> 56import { omit } from 'lodash'; 57 58export default { 59 name: 'TableRowAction', 60 props: { 61 value: { 62 type: String, 63 required: true, 64 }, 65 enabled: { 66 type: Boolean, 67 default: true, 68 }, 69 title: { 70 type: String, 71 default: null, 72 }, 73 rowData: { 74 type: Object, 75 default: () => {}, 76 }, 77 exportName: { 78 type: String, 79 default: 'export', 80 }, 81 downloadLocation: { 82 type: String, 83 default: '', 84 }, 85 btnIconOnly: { 86 type: Boolean, 87 default: true, 88 }, 89 downloadInNewTab: { 90 type: Boolean, 91 default: false, 92 }, 93 }, 94 computed: { 95 dataForExport() { 96 return JSON.stringify(omit(this.rowData, 'actions')); 97 }, 98 download() { 99 return `${this.exportName}.json`; 100 }, 101 href() { 102 return `data:text/json;charset=utf-8,${this.dataForExport}`; 103 }, 104 }, 105}; 106</script> 107