2022-11-23 17:17:54 +00:00
|
|
|
<script setup lang="ts">
|
|
|
|
import type { Attachment } from 'masto'
|
|
|
|
|
2022-12-14 23:30:54 +00:00
|
|
|
const props = withDefaults(defineProps<{
|
2022-11-23 17:17:54 +00:00
|
|
|
attachment: Attachment
|
|
|
|
alt?: string
|
|
|
|
removable?: boolean
|
2022-12-16 19:55:31 +00:00
|
|
|
dialogLabelledBy?: string
|
2022-11-23 17:17:54 +00:00
|
|
|
}>(), {
|
|
|
|
removable: true,
|
|
|
|
})
|
|
|
|
|
|
|
|
defineEmits<{
|
|
|
|
(evt: 'remove'): void
|
2022-12-14 23:30:54 +00:00
|
|
|
(evt: 'setDescription', description: string): void
|
2022-11-23 17:17:54 +00:00
|
|
|
}>()
|
2022-12-14 23:30:54 +00:00
|
|
|
|
|
|
|
const isEditDialogOpen = ref(false)
|
2022-12-14 23:40:39 +00:00
|
|
|
const description = ref(props.attachment.description ?? '')
|
2022-11-23 17:17:54 +00:00
|
|
|
</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"
|
2022-12-22 10:59:25 +00:00
|
|
|
:aria-label="$t('attachment.remove_label')"
|
2022-11-30 13:01:03 +00:00
|
|
|
hover:bg="gray/40" transition-100 p-1 rounded-5 cursor-pointer
|
2022-12-22 02:27:16 +00:00
|
|
|
:class="[isHydrated.value && isSmallScreen ? '' : 'op-0 group-hover:op-100hover:']"
|
2022-11-30 13:01:03 +00:00
|
|
|
mix-blend-difference
|
2022-11-24 04:05:13 +00:00
|
|
|
@click="$emit('remove')"
|
|
|
|
>
|
2022-12-22 02:27:16 +00:00
|
|
|
<div i-ri:close-line text-3 :class="[isHydrated.value && isSmallScreen ? 'text-6' : 'text-3']" />
|
2022-11-24 04:05:13 +00:00
|
|
|
</div>
|
2022-11-23 17:17:54 +00:00
|
|
|
</div>
|
2022-12-14 23:30:54 +00:00
|
|
|
<div absolute right-2 bottom-2>
|
|
|
|
<button class="bg-black/75" text-white px2 py1 rounded-2 @click="isEditDialogOpen = true">
|
2022-12-22 10:59:25 +00:00
|
|
|
{{ $t('action.edit') }}
|
2022-12-14 23:30:54 +00:00
|
|
|
</button>
|
|
|
|
</div>
|
2022-12-16 19:55:31 +00:00
|
|
|
<ModalDialog
|
|
|
|
v-model="isEditDialogOpen"
|
|
|
|
:dialog-labelled-by="dialogLabelledBy"
|
|
|
|
py-6
|
|
|
|
px-6 max-w-300
|
|
|
|
>
|
2022-12-23 09:09:52 +00:00
|
|
|
<div flex flex-col-reverse gap-5 md:flex-row>
|
2022-12-14 23:30:54 +00:00
|
|
|
<div flex flex-col gap-2 justify-between>
|
2022-12-16 19:55:31 +00:00
|
|
|
<h1 id="edit-attachment" font-bold>
|
2022-12-22 10:59:25 +00:00
|
|
|
{{ $t('attachment.edit_title') }}
|
2022-12-14 23:30:54 +00:00
|
|
|
</h1>
|
|
|
|
<div flex flex-col gap-2>
|
2022-12-23 09:09:52 +00:00
|
|
|
<textarea v-model="description" p-3 h-50 bg-base rounded-2 border-strong border-1 md:w-100 />
|
2022-12-14 23:30:54 +00:00
|
|
|
<button btn-outline @click="$emit('setDescription', description)">
|
2022-12-22 10:59:25 +00:00
|
|
|
{{ $t('action.apply') }}
|
2022-12-14 23:30:54 +00:00
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<button btn-outline @click="isEditDialogOpen = false">
|
2022-12-22 10:59:25 +00:00
|
|
|
{{ $t('action.close') }}
|
2022-12-14 23:30:54 +00:00
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<StatusAttachment :attachment="attachment" w-full />
|
|
|
|
</div>
|
|
|
|
</ModalDialog>
|
2022-11-23 17:17:54 +00:00
|
|
|
</div>
|
|
|
|
</template>
|