elk/components/publish/PublishAttachment.vue

72 lines
2.1 KiB
Vue
Raw Normal View History

2022-11-23 17:17:54 +00:00
<script setup lang="ts">
2023-01-08 06:21:09 +00:00
import type { mastodon } from 'masto'
2022-11-23 17:17:54 +00:00
2022-12-14 23:30:54 +00:00
const props = withDefaults(defineProps<{
2023-01-08 06:21:09 +00:00
attachment: mastodon.v1.MediaAttachment
2022-11-23 17:17:54 +00:00
alt?: string
removable?: boolean
dialogLabelledBy?: string
2022-11-23 17:17:54 +00:00
}>(), {
removable: true,
})
const emit = defineEmits<{
2022-11-23 17:17:54 +00:00
(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 ?? '')
const toggleApply = () => {
isEditDialogOpen.value = false
emit('setDescription', unref(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"
2023-01-09 20:20:26 +00:00
:aria-label="$t('attachment_remove_label')"
hover:bg="gray/40" transition-100 p-1 rounded-5 cursor-pointer
:class="[isHydrated && 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="[isHydrated && 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">
2023-01-09 20:20:26 +00:00
{{ $t('action_edit') }}
2022-12-14 23:30:54 +00:00
</button>
</div>
<ModalDialog
v-model="isEditDialogOpen"
:dialog-labelled-by="dialogLabelledBy"
py-6
px-6 max-w-300
>
<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>
<h1 id="edit-attachment" font-bold>
2023-01-09 20:20:26 +00:00
{{ $t('attachment_edit_title') }}
2022-12-14 23:30:54 +00:00
</h1>
<div flex flex-col gap-2>
<textarea v-model="description" p-3 h-50 bg-base rounded-2 border-strong border-1 md:w-100 />
<button btn-outline @click="toggleApply">
2023-01-09 20:20:26 +00:00
{{ $t('action_apply') }}
2022-12-14 23:30:54 +00:00
</button>
</div>
<button btn-outline @click="isEditDialogOpen = false">
2023-01-09 20:20:26 +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>