feat: basic alt text edit

zio/stable
patak 2022-12-15 00:30:54 +01:00
parent 0f438b80cd
commit 2f8085fa86
2 changed files with 36 additions and 2 deletions

View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import type { Attachment } from 'masto'
withDefaults(defineProps<{
const props = withDefaults(defineProps<{
attachment: Attachment
alt?: string
removable?: boolean
@ -11,7 +11,11 @@ withDefaults(defineProps<{
defineEmits<{
(evt: 'remove'): void
(evt: 'setDescription', description: string): void
}>()
const isEditDialogOpen = ref(false)
const description = ref(props.attachment.description)
</script>
<template>
@ -29,5 +33,29 @@ defineEmits<{
<div i-ri:close-line text-3 :class="[isSmallScreen ? 'text-6' : 'text-3']" />
</div>
</div>
<div absolute right-2 bottom-2>
<button class="bg-black/75" text-white px2 py1 rounded-2 @click="isEditDialogOpen = true">
Edit
</button>
</div>
<ModalDialog v-model="isEditDialogOpen" py-6 px-6 max-w-300>
<div flex gap-5>
<div flex flex-col gap-2 justify-between>
<h1 font-bold>
Description
</h1>
<div flex flex-col gap-2>
<textarea v-model="description" p-3 w-100 h-50 bg-base rounded-2 border-strong border-1 />
<button btn-outline @click="$emit('setDescription', description)">
Apply
</button>
</div>
<button btn-outline @click="isEditDialogOpen = false">
Close
</button>
</div>
<StatusAttachment :attachment="attachment" w-full />
</div>
</ModalDialog>
</div>
</template>

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { CreateStatusParams, StatusVisibility } from 'masto'
import type { Attachment, CreateStatusParams, StatusVisibility } from 'masto'
import { fileOpen } from 'browser-fs-access'
import { useDropZone } from '@vueuse/core'
import { EditorContent } from '@tiptap/vue-3'
@ -99,6 +99,11 @@ async function uploadAttachments(files: File[]) {
isUploading = false
}
async function setDescription(att: Attachment, description: string) {
att.description = description
await useMasto().mediaAttachments.update(att.id, { description: att.description })
}
function removeAttachment(index: number) {
draft.attachments.splice(index, 1)
}
@ -213,6 +218,7 @@ defineExpose({
v-for="(att, idx) in draft.attachments" :key="att.id"
:attachment="att"
@remove="removeAttachment(idx)"
@set-description="setDescription(att, $event)"
/>
</div>
</div>