68 lines
1.5 KiB
Vue
68 lines
1.5 KiB
Vue
<script setup>
|
|
const { $buildFileUrl, $copyToClipboard } = useNuxtApp();
|
|
|
|
const props = defineProps({
|
|
className: String,
|
|
image: Object,
|
|
editImage: Function,
|
|
downloadImage: Function,
|
|
openDeleteImageConfirm: Function,
|
|
});
|
|
|
|
const url = $buildFileUrl(props.image.file__file);
|
|
</script>
|
|
<template>
|
|
<div :class="['buttons has-addons', className]">
|
|
<button
|
|
class="button is-small is-white"
|
|
@click="$copyToClipboard(url)"
|
|
title="Sao chép link"
|
|
>
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:content-copy-outline-rounded"
|
|
:size="18"
|
|
/>
|
|
</span>
|
|
</button>
|
|
<button
|
|
class="button is-small is-white"
|
|
@click="editImage(image)"
|
|
title="Sửa"
|
|
>
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:edit-outline-rounded"
|
|
:size="18"
|
|
/>
|
|
</span>
|
|
</button>
|
|
<button
|
|
class="button is-small is-white"
|
|
@click.prevent="downloadImage(image)"
|
|
title="Tải xuống"
|
|
>
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:download-rounded"
|
|
:size="18"
|
|
/>
|
|
</span>
|
|
</button>
|
|
<button
|
|
class="button is-small is-white"
|
|
@click="openDeleteImageConfirm(image)"
|
|
title="Xóa"
|
|
>
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:delete-outline-rounded"
|
|
:size="18"
|
|
class="has-text-danger"
|
|
/>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
<style></style>
|