elk/components/publish/PublishAttachment.vue

34 lines
783 B
Vue
Raw Normal View History

2022-11-23 17:17:54 +00:00
<script setup lang="ts">
import type { Attachment } from 'masto'
withDefaults(defineProps<{
attachment: Attachment
alt?: string
removable?: boolean
}>(), {
removable: true,
})
defineEmits<{
(evt: 'remove'): void
}>()
</script>
<template>
<div relative group>
2022-11-25 14:31:33 +00:00
<StatusAttachment :attachment="attachment" w-full />
2022-11-24 04:05:13 +00:00
<div absolute right-2 top-2>
<div
v-if="removable"
aria-label="Remove attachment"
hover:bg="gray/40" transition-100 p-1 rounded-5 cursor-pointer
:class="[isSmallScreen ? '' : 'op-0 group-hover:op-100hover:']"
mix-blend-difference
2022-11-24 04:05:13 +00:00
@click="$emit('remove')"
>
<div i-ri:close-line text-3 :class="[isSmallScreen ? 'text-6' : 'text-3']" />
2022-11-24 04:05:13 +00:00
</div>
2022-11-23 17:17:54 +00:00
</div>
</div>
</template>